<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>China Fullfill</title>

<script type="text/javascript" src="/ptblog/public/js/jquery.min.js"></script>
<script type="text/javascript" src="/ptblog/public/js/jquery-ui.js"></script>
<script type="text/javascript" src="/ptblog/public/js/jquery.form.js"></script>
<script src="/ptblog/public/js/jquery.pagination.js" type="text/javascript"></script>
<script src="/ptblog/public/js/jquery.loading.js" type="text/javascript"></script>
<script src="/ptblog/public/js/cff.pagination.js" type="text/javascript"></script>
<script src="/ptblog/public/js/cff.iframe.dialog.js" type="text/javascript"></script>
<script src="/ptblog/public/js/cff.autocomplete.js" type="text/javascript"></script>

<!-- 
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有文章"
	href="http://www.logo-printer.cn/blog/feed" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0 - 所有评论"
	href="http://www.logo-printer.cn/blog/comments/feed" />
<link rel="pingback" href="http://www.logo-printer.cn/blog/xmlrpc.php" />
 -->
<!-- style START -->
<!-- default style -->
<style type="text/css" media="screen">
@import
	url( /ptblog/public/theme/inove/style.css )
	;
</style>
<!-- for translations -->
<link rel="stylesheet"
	href="/ptblog/public/theme/inove/chinese.css"
	type="text/css" media="screen" />
<!--[if IE]>
	<link rel="stylesheet" href="/ptblog/public/theme/inove/ie.css" type="text/css" media="screen" />
<![endif]-->
<!-- style END -->

<!-- script START -->
<script type="text/javascript"
	src="/ptblog/public/theme/inove/js/base.js"></script>
<script type="text/javascript"
	src="/ptblog/public/theme/inove/js/menu.js"></script>
	

<!-- script END -->

<link rel='stylesheet' id='codebox-css'
	href='http://www.logo-printer.cn/blog/wp-content/plugins/wp-codebox/css/codebox.css?ver=0.1'
	type='text/css' media='screen' />
	
<script type='text/javascript'
	src='http://www.logo-printer.cn/blog/wp-content/plugins/wp-codebox/js/codebox.js?ver=0.1'></script>
	<!-- 
<link rel="EditURI" type="application/rsd+xml" title="RSD"
	href="http://www.logo-printer.cn/blog/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml"
	href="http://www.logo-printer.cn/blog/wp-includes/wlwmanifest.xml" />
 -->
	
<link href="/ptblog/public/css/pagination.css" rel="stylesheet" type="text/css" />
<link href="/ptblog/public/css/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />

</head>
<body>
<!-- wrap START -->
<div id="wrap">

	<!-- container START -->
	<div id="container">

		<!-- header START -->
		<div id="header">

			<!-- banner START -->
			<!-- banner END -->

			<div id="caption">
				<h1 id="title">
					<a href="http://www.logo-printer.cn/blog/">思瑞品牌设计</a>
				</h1>
				<div id="tagline">个人博客</div>
			</div>

			<div class="fixed"></div>
		</div>
		<!-- header END -->

		<!-- navigation START -->
		<div id="navigation">
			<!-- menus START -->
			<ul id="menus">
				<li class="current_page_item"><a class="home" title="首页"
					href="http://www.logo-printer.cn/blog/">首页</a></li>
				<li class="page_item page-item-2"><a
					href="http://www.logo-printer.cn/blog/sample-page">关于我们</a></li>
				<li class="page_item page-item-9"><a
					href="http://www.logo-printer.cn/blog/zencart">zencart 模板原理</a></li>
				<li class="page_item page-item-1057"><a
					href="http://www.logo-printer.cn/blog/op_edit">开源编辑器</a></li>
				<li class="page_item page-item-1517"><a
					href="http://www.logo-printer.cn/blog/photoshop">在线photoshop</a></li>
				<li><a class="lastmenu" href="javascript:void(0);"></a></li>
			</ul>
			<!-- menus END -->

			<!-- searchbox START -->
			<div id="searchbox">
				<form action="http://www.logo-printer.cn/blog" method="get">
					<div class="content">
						<input type="text" class="textfield" name="s" size="24" value="" />
						<input type="submit" class="button" value="" />
					</div>
				</form>
			</div>
			<!-- searchbox END -->
			<script type="text/javascript">
			//<![CDATA[
				var searchbox = MGJS.$("searchbox");
				var searchtxt = MGJS.getElementsByClassName("textfield", "input", searchbox)[0];
				var searchbtn = MGJS.getElementsByClassName("button", "input", searchbox)[0];
				var tiptext = "请输入关键字...";
				if(searchtxt.value == "" || searchtxt.value == tiptext) {
					searchtxt.className += " searchtip";
					searchtxt.value = tiptext;
				}
				searchtxt.onfocus = function(e) {
					if(searchtxt.value == tiptext) {
						searchtxt.value = "";
						searchtxt.className = searchtxt.className.replace(" searchtip", "");
					}
				}
				searchtxt.onblur = function(e) {
					if(searchtxt.value == "") {
						searchtxt.className += " searchtip";
						searchtxt.value = tiptext;
					}
				}
				searchbtn.onclick = function(e) {
					if(searchtxt.value == "" || searchtxt.value == tiptext) {
						return false;
					}
				}
			//]]>
			</script>	
			<div class="fixed"></div>
		</div>
		<!-- navigation END -->

		<!-- content START -->
		<div id="content">			
			
<!-- main START -->
<div id="main">
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">分享</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p>[[ 靓点着迷 ] 性感美女 《Hush》 激情 热舞]<a href="http://v.youku.com/v_show/id_XNDA1ODUyNDU2.html">http://v.youku.com/v_show/id_XNDA1ODUyNDU2.html</a></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">Onunload，onbeforeunload</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div id="cnblogs_post_body"><font size="2">Onunload，onbeforeunload都是在刷新或 关闭时调用，可以在&lt;script&gt;脚本中通过  window.onunload来指定或者在&lt;body&gt;里指定。区别在于onbeforeunload在onunload之前执行，它还可 以阻止onunload的执行。 </font> <div><font size="2">　　Onbeforeunload也是在页面刷新或关闭时调用，Onbeforeunload是正要去服务器读  取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。Onunload是无 法阻止页面的更新和关闭的。而 Onbeforeunload 可以做到。</font></div> <div><font size="2"><strong>1、onbeforeunload事件：<br /></p><p></strong>　　说明：目前三大主流浏览器中firefox和IE都支持onbeforeunload事件,opera尚未支持。<br /></p><p>用法：<br /></p><p>·object.onbeforeunload = handler <br /></p><p>·&lt;element onbeforeunload = “handler” … &gt;&lt;/element&gt; <br /></p><p>描述：<br /></p><p>事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。</font></div> <div><font size="2">　　触发于：<br /></p><p></font>　　<font size="2">·关闭浏览器窗口 <br /></p><p></font>　　<font size="2">·通过地址栏或收藏夹前往其他页面的时候 <br /></p><p></font>　　<font size="2">·点击返回，前进，刷新，主页其中一个的时候 <br /></p><p></font>　　<font size="2">·点击 一个前往其他页面的url连接的时候 <br /></p><p></font>　　<font size="2">·调用以下任意一个事件的时候：click，document write，document  open，document close，window close ，window navigate ，window  NavigateAndFind,location replace,location reload,form submit. <br /></p><p></font>　　<font size="2">·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。 <br /></p><p></font>　　<font size="2">·重新赋予location.href的值的时候。 <br /></p><p></font>　　<font size="2">·通过input type=”submit”按钮提交一个具有指定action的表单的时候。 <br /></p><p></font>　　<font size="2">可以用在以下元素：<br /></p><p></font>　　<font size="2">·BODY, FRAMESET, window<br /></p><p></font>　　<font size="2">平台支持：<br /></p><p></font>　　<font size="2">IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+ <br /></p><p></font>　　<font size="2">示例：</font></div> <div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" /></a></span></div><span style="color: #000000;">&lt;</span><span style="color: #000000;">html&nbsp;xmlns</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;"><a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a></span><span style="color: #000000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">head</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">meta&nbsp;http</span><span style="color: #000000;">-</span><span style="color: #000000;">equiv</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">Content-Type</span><span style="color: #000000;">"</span><span style="color: #000000;">&nbsp;content</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">text/html;&nbsp;charset=gb2312</span><span style="color: #000000;">"</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">/</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">title</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">onbeforeunload测试</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">title&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #0000ff;">function</span><span style="color: #000000;">&nbsp;checkLeave(){<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;　event.returnValue</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">确定离开当前页面吗？</span><span style="color: #000000;">"</span><span style="color: #000000;">;<br /></p><p>}<br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">script&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">head&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">body&nbsp;onbeforeunload</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">checkLeave()</span><span style="color: #000000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">body&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">html&gt;</span><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" /></a></span></div></div> <p>&nbsp;</p> <p>&nbsp;</p> <p>但是onbeforeunload有个小毛病，就是页面刷新时，他还是会调用到onbeforeunload，为什么？其实刷新就相当于关闭了这个IE再重新打开的意思，因此还是会调用到onbeforeunload。</p> <p>&nbsp;究竟怎么解决刷新不调用onbeforeunload呢？</p> <p>&nbsp;网上提供很多方法，本人觉得最实用还是以下这段JS</p><p>&nbsp;</p><div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" /></a></span></div><span style="color: #000000;">window.onbeforeunload&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){&nbsp;&nbsp;&nbsp;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;n&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;window.event.screenX&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">-</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;window.screenLeft;&nbsp;&nbsp;&nbsp;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">var</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;b&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;n&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;document.documentElement.scrollWidth</span><span style="color: #000000;">-</span><span style="color: #000000;">20</span><span style="color: #000000;">;&nbsp;&nbsp;&nbsp;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(b&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">&amp;&amp;</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;window.event.clientY&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">0</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">||</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;window.event.altKey)&nbsp;&nbsp;&nbsp;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(</span><span style="color: #000000;">"</span><span style="color: #000000;">是关闭而非刷新</span><span style="color: #000000;">"</span><span style="color: #000000;">);&nbsp;&nbsp;&nbsp;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.event.returnValue&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">=</span><span style="color: #000000;">&nbsp;&nbsp;&nbsp;</span><span style="color: #000000;">"</span><span style="color: #000000;">是否关闭？</span><span style="color: #000000;">"</span><span style="color: #000000;">;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(</span><span style="color: #000000;">"</span><span style="color: #000000;">是刷新而非关闭</span><span style="color: #000000;">"</span><span style="color: #000000;">);&nbsp;&nbsp;&nbsp;<br /></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;<br /></p><p>}</span><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" /></a></span></div></div> <div><font size="2"><strong>2、onunload事件</strong><br /></p><p>用法：<br /></p><p>·object.onbeforeunload = handler <br /></p><p>·&lt;element onbeforeunload = "handler"&gt;&lt;/element&gt; </font></div> <div><font size="2">　　描述：<br /></p><p>当用户关闭一个页面时触发 onunload 事件。</font></div> <font size="2">　　触发于：<br /></p><p></font>　　<font size="2">·关闭浏览器窗口 <br /></p><p></font>　　<font size="2">·通过地址栏或收藏夹前往其他页面的时候 <br /></p><p></font>　　<font size="2">·点击返回，前进，刷新，主页其中一个的时候 <br /></p><p></font>　　<font size="2">·点击 一个前往其他页面的url连接的时候 <br /></p><p></font>　　<font size="2">· 调用以下任意一个事件的时候：click，document write，document open，document close，window  close ，window navigate ，window NavigateAndFind,location replace,location reload,form submit. <br /></p><p></font>　　<font size="2">·当用window open打开一个页面，并把本页的window的名字传给要打开的页面的时候。 <br /></p><p></font>　　<font size="2">·重新赋予location.href的值的时候。 <br /></p><p></font>　　<font size="2">·通过input type=”submit”按钮提交一个具有指定action的表单的时候。 <br /></p><p></font> <p>　　<font size="2">示例：</font></p><div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" /></a></span></div><span style="color: #000000;">&lt;</span><span style="color: #000000;">html&nbsp;xmlns</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;"><a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a></span><span style="color: #000000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">head</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">meta&nbsp;http</span><span style="color: #000000;">-</span><span style="color: #000000;">equiv</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">Content-Type</span><span style="color: #000000;">"</span><span style="color: #000000;">&nbsp;content</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">text/html;&nbsp;charset=gb2312</span><span style="color: #000000;">"</span><span style="color: #000000;">&nbsp;</span><span style="color: #000000;">/</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">title</span><span style="color: #000000;">&gt;</span><span style="color: #000000;">onunload测试</span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">title&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">script</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span>　　<span style="color: #0000ff;">function</span><span style="color: #000000;">&nbsp;checkLeave(){<br /></p><p></span>　　　　<span style="color: #000000;">alert(</span><span style="color: #000000;">"</span><span style="color: #000000;">欢迎下次再来！</span><span style="color: #000000;">"</span><span style="color: #000000;">);<br /></p><p></span>　　<span style="color: #000000;">}<br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">script&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">head&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">body&nbsp;onunload</span><span style="color: #000000;">=</span><span style="color: #000000;">"</span><span style="color: #000000;">checkLeave()</span><span style="color: #000000;">"</span><span style="color: #000000;">&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">body&gt;</span><span style="color: #000000;"><br /></p><p></span><span style="color: #000000;"></span><span style="color: #000000;">&lt;</span><span style="color: #000000;">/</span><span style="color: #000000;">html&gt;</span><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a title="复制代码"><img src="http://common.cnblogs.com/images/copycode.gif" alt="复制代码" /></a></span></div></div> <p>&nbsp;</p></div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">Nginx进行流量copy到测试环境</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div id="cnblogs_post_body"><h1 style="color: #222222; font-size: 20px; font-family: Tahoma,Arial,Verdana; font-weight: normal; text-decoration: none; margin: 0px 0px 10px; padding: 0px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">Nginx进行流量copy到测试环境</h1>from:<a href="http://www.cnblogs.com/lexus/archive/2012/04/06/2434290.html">http://www.cnblogs.com/lexus/archive/2012/04/06/2434290.html</a><br /></p><p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">经常会遇到测试环境需要一些数据，当然你可以自己仿造数据，但是更方便和更好的做法是，将来自正式环境的用户请求copy一份到测试环境。</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">依赖模块lua-nginx-module，ngx_devel_kit，&nbsp;headers-more-nginx-module</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">以上模块在github上均可以找到，作者是国内nginx的著名开发者agentzh。</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">使用模块需要重新编译nginx， &nbsp;–add-module=/path/to/your/module</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">下面是nginx配置：</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">&gt;&gt;cat copy_req.lua</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">local res1, res2, action<br /></p><p>action = ngx.var.request_method<br /></p><p>if action == “POST” then<br /></p><p>arry = {method = ngx.HTTP_POST, body = request_body}<br /></p><p>else<br /></p><p>arry = {method = ngx.HTTP_GET}<br /></p><p>end</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">if ngx.var.svr == “on” then<br /></p><p>res1, res2 = ngx.location.capture_multi {<br /></p><p>{ “/s1″ .. ngx.var.request_uri , arry},<br /></p><p>{ “/test” .. ngx.var.request_uri , arry},<br /></p><p>}<br /></p><p>else<br /></p><p>res1, res2 = ngx.location.capture_multi {<br /></p><p>{ “/s1″ .. ngx.var.request_uri , arry},<br /></p><p>}<br /></p><p>end</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">if res1.status == ngx.HTTP_OK then<br /></p><p>local header_list = {“Content-Length”, “Content-Type”, “Content-Encoding”, “Accept-Ranges”}<br /></p><p>for _, i in ipairs(header_list) do<br /></p><p>if res1.header[i] then<br /></p><p>ngx.header[i] = res1.header[i]<br /></p><p>end<br /></p><p>end<br /></p><p>ngx.say(res1.body)<br /></p><p>else<br /></p><p>ngx.status = ngx.HTTP_NOT_FOUND<br /></p><p>end</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">&gt;&gt;cat &nbsp; nginx.conf</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">……..</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">location ~* ^/s1 {<br /></p><p>log_subrequest on;<br /></p><p>rewrite ^/s1(.*)$ $1 break;<br /></p><p>proxy_pass http://s1;<br /></p><p>access_log /opt/logs/nginx/youni/upstream.log;<br /></p><p>}</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">location ~* ^/test {<br /></p><p>log_subrequest on;<br /></p><p>rewrite ^/test(.*)$ $1 break;<br /></p><p>proxy_pass http://test;</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">access_log /opt/logs/nginx/youni/upstream.log;</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">}</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">location ~* ^/(.*)$ {<br /></p><p>client_body_buffer_size 2m;<br /></p><p>set $svr &nbsp; &nbsp; “on”; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #开启或关闭copy功能</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">content_by_lua_file &nbsp; &nbsp;req_fenliu.lua;<br /></p><p>}</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">&nbsp;</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">upstream s1 {</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">server &nbsp;x.x.x.x;</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">}</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">upstream test {</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">server &nbsp;xx.xx.xx.xx;</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">}</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">……</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">其中的nginx.conf内的http,server域我没有放上来了。依照自己的配置即可.</p><p style="margin: 0px; padding: 0px 0px 15px; color: #333333; font-family: Arial,Tahoma,Verdana; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: #ffffff;">完.</p></div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">Zend_Controller工作原理</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p>Zend_Controller工作原理<br /></p><p>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Zend_Controller_Front接收一个请求，然后由  Zend_Controller_Router来决定分配给哪个controller（实现Zend_Controller_Action的类）。  Zend_Controller_Router把URI分解封装成一个Zend_Controller_Dispatcher_Token  对象。Zend_Controller_Front接着进入一个分配循环，调用Zend_Controller_Dispatcher，把token对象 传给dispatcher来分配到具体的controller和action进行处理。在controller结束后，又把控制权交加给  Zend_Controller_Front。如果controller发现需要分配另一个controller（返回一个新的token对象），循环会 一直继续直到另一次分配执行完毕。<br /></p><p><br /></p><p>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Zend_Controller_Action提供控制器的基本方法，其他控制器都应该是Zend_Controller_Action的子类。<br /></p><p><br /></p><p>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;说明：<br /></p><p>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;Zend_Controller_Dispatcher对象在Zend_Controller_Front和实现Router、Dispacther接口的类之间传递。它把Controller、Action和其他Get参数封装到一起。<br /></p><p>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;处理Controller名称：getControllerName()、setControllerName()；<br /></p><p>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;处理Action名称：getActionName()、setActionName()；<br /></p><p>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;传递给Action参数：getParams()、setParams()。参数是数组key/value形式。</p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">皮皮西（北京）科技有限公司</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p>http://www.ppcbj.net/aboutus-recommend.html</p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">超强的jquery极品插件--分页类和提示框弹窗类</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div class="posthead"> 			<h2> 				<a id="cb_post_title_url" class="singleposttitle" href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557289.html">超强的jquery极品插件--分页类和提示框弹窗类</a></h2><br /></p><p></div> 		<div id="cnblogs_post_body"><p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;">分页类</span></span></span></p><br /></p><p><p>&nbsp;<img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Pagination <br /></p><p><br /></p><p>jQuery分页插件<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Pagination.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://plugins.jquery.com/project/pagination" target="_blank">jQuery Pagination</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> pager jQuery plug-in <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery分页插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/pager_jQuery_plug-in.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://rikrikrik.com/jquery/pager/" target="_blank">pager jQuery plug-in</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> JQuery Pager <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个利用jQuery开发的分页UI控件，可用于数据驱动的web应用程序中。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/JQuery_Pager.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html" target="_blank">JQuery Pager</a><br /></p><p><br /></p><p><br /></p><p></p> <p>&nbsp;</p> <p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />提示框弹窗类</span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Facebox <br /></p><p><br /></p><p>Facebox 是一个基于jQuery，Facebook-style的lightbox。能够展示示images，divs或者整个远程<span href="http://www.cnblogs.com/andylaufzf/archive/2009/03/26/tag.php?name=%D2%B3%C3%E6">页面</span>。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Facebox2.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://famspam.com/facebox" target="_blank">Facebox</a><br /></p><p>SimpleModal <br /></p><p><br /></p><p>SimpleModal是一个轻量级jQuery插件提供了一个简单的接口来创建模式对话框。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/SimpleModal.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.ericmmartin.com/projects/simplemodal" target="_blank">SimpleModal</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jTip <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jTip一个利用jQuery开发的提示工具。jTip通过HttpXMLRequest获取内容。用法简单，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/tooltips_05.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://codylindley.com/Javascript/264/jtip-a-jquery-tool-tip" target="_blank">jTip</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> BetterTip <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个可以自定义Tooltip的jQuery插件。基于jTip，但比它来得更加灵活。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/090901.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://edgarverle.com/BetterTip/default.cfm" target="_blank">BetterTip</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> clueTip <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>clueTip这个jQuery插件方便您为链接或其它元素添加Tooltip功能。当链接包括title属性时，它的内容将变成clueTip的标题。clueTip中显示的内容可以通过Ajax获取，也可以从当前页面中的元素中获取。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/clueTip.jpg" border="0" height="218" width="400" /><br /></p><p><br /></p><p><a href="http://plugins.jquery.com/project/cluetip" target="_blank">clueTip</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery lightBox plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个简单，强大基于jQuery开发的lightBox控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_lightBox_plugin.jpg" border="0" /> <br /></p><p><br /></p><p><a href="http://leandrovieira.com/projects/jquery/lightbox/" target="_blank">jQuery lightBox plugin</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Impromptu <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>用于创建模式对话框，确认对话框，输入内容对话框的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Impromptu.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://trentrichardson.com/Impromptu/" target="_blank">jQuery Impromptu</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery.UI Messenger"Outlook like message notification Widget <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery.UI控件类似于Messenger"Outlook消息弹出提醒框。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery.UI.Messenger.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://mosesofegypt.net/post/2008/07/17/jQueryui-Messenger-Outlook-like-message-notification-Widget.aspx" target="_blank">jQuery.UI Messenger"Outlook like message notification Widget</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> FancyBox <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该Lightbox除了能够展示图片之外，还可以展示iframed内容， 通过CSS自定义外观。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/FancyBox.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://fancy.klade.lv/" target="_blank">FancyBox</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Coda Popup Bubbles <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>采用jQuery开发，类似“冒泡”效果的提醒弹出框。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Coda_Popup_Bubbles.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://jqueryfordesigners.com/coda-popup-bubbles/" target="_blank">Coda Popup Bubbles</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jGrowl <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jGrowl用于制作消息弹出框的jQuery插件。产生效果的类似于Mac　OSX系统中Growl事件通知框架。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jGrowl.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://stanlemon.net/projects/jgrowl.html" target="_blank">j</a><a href="http://stanlemon.net/projects/jgrowl.html" target="_blank">Grow</a><a href="http://stanlemon.net/projects/jgrowl.html" target="_blank">l</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jqWindowsEngine <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery插件能够帮助你轻松创建Ajax Windows。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jqWindowsEngine.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.socialembedded.com/labs/jQuery-Windows-Engine-Plugin/jQuery-Windows-Engine-Plugin.html" target="_blank">jqWindowsEngine</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Alert Dialogs <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery插件能够替换JavaScript提供的alert()、confirm()和prompt()功能。支持利用CSS自定义对话框外观。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs1.jpg" border="0" /><br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs2.jpg" border="0" /><br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs3.jpg" border="0" /><br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Alert_Dialogs4.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://abeautifulsite.net/notebook/87" target="_blank">jQuery Alert Dialogs</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> BeautyTips <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>BeautyTips是一个jQuery Tooltip插件.<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/diwd-schedule-2.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.lullabot.com/articles/announcing-beautytips-jquery-tooltip-plugin" target="_blank">BeautyTips</a><br /></p><p></p><br /></p><p><ol><li> <p>Facebook/Xiaonei 风格模态框 </p> <p>效果图:<br /></p><p><img alt="" src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-10_233118.png" border="0" height="209" width="489" /><br /></p><p>简介: <br /></p><p>使用 div, table 和 opacity 效果实现模态框效果... <br /></p><p>导航: <br /></p><p><a href="http://www.cnblogs.com/fromearth/archive/2009/05/10/1453842.html" target="_blank">详细介绍</a> | <a href="http://www.ajaxplaza.net/jmodal/jmodal.htm" target="_blank">在线演示</a></p></li></ol>&nbsp;　　引自:http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html</div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">超强的jquery极品插件--编辑器类和表格类</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div class="posthead"> 			<h2> 				<a id="cb_post_title_url" class="singleposttitle" href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557293.html">超强的jquery极品插件--编辑器类和表格类</a> 			</h2> 			Posted on <span id="post-date">2009-08-31 14:53</span> <a href="http://www.cnblogs.com/hcbwei/">hcb</a> 阅读(1034) 评论(<span id="post-comment-count">0</span>)  <a href="http://www.cnblogs.com/hcbwei/admin/EditPosts.aspx?postid=1557293" rel="nofollow">编辑</a> <a href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557293.html#">收藏</a> 			<img src="http://www.cnblogs.com/hcbwei/aggbug/1557293.html?type=1&amp;webview=1" alt="" height="1" width="1" /> 			 		</div> 		<div id="cnblogs_post_body"><p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />编辑器类</span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jwysiwyg<br /></p><p><br /></p><p>WYSIWYG jQuery插件。整个编辑器文件大小只有17Kb。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/wysiwyg.jpg" border="0" /><br /></p><p><br /></p><p></p> <p><a href="http://code.google.com/p/jwysiwyg/" target="_blank">jwysiwyg</a></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Damn Small Rich Text Editor <br /></p><p><br /></p><p>基于jQuery开发，能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能，可设置文本编辑区大小，Ajax上传图片等。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Damn.jpg" border="0" /> <br /></p><p><br /></p><p><a href="http://www.avidansoft.com/dsrte/index.php" target="_blank">Damn Small Rich Text Editor</a><br /></p><p></p> <p>&nbsp;</p> <p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />表格类</span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Flexigrid<br /></p><p><br /></p><p>Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Flexigrid.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://webplicity.net/flexigrid/" target="_blank">Flexigrid</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Ingrid <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery DataGrid提供的功能有：可以拖动调整列宽，分页，排序，设置行/列样式等。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Ingrid.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.reconstrukt.com/ingrid/" target="_blank">Ingrid</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Grid <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jqGrid是一个Ajaxed jQuery Grid插件。提供分页功能，添加、编辑、删除和搜索表中记录，支持多种数据类型输入：XML，JSON，Array等，多行选择，支持子表格，集成日期选择控件等等。<br /></p><p><br /></p><p><a href="http://trirand.com/jqgrid/jqgrid.html" target="_blank">Demo</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jqGrid.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.trirand.com/blog/" target="_blank">jQuery Grid</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> tableHover <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>tableHover一个jQuery插件当鼠标经过时，能够对表格的一整列或行进行着色加亮。支持colspans与rowspans的表格。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/tableHover.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://p.sohei.org/jquery-plugins/tablehover/" target="_blank">tableHover</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> JQuery.Resizer <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个轻量级jQuery插件用于创建可以拖动调整行高与列宽的表格。<br /></p><p><br /></p><p><a href="http://os.arandomurl.com/jquerytableresizer/" target="_blank">JQuery.Resizer</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> tablesorter <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>tablesorter  这个jQuery插件能够将带THEAD与TBODY标签的标准HTMLTable转换成一个可排序的表格。tablesorter能够排序多种数据类型  包括Text、URIs、integers、currency、floats、IP地址、日期、时间和自定义的数据类型。支持拥有复杂表头表格的排序，支 持二级隐藏排序，支持多种浏览器：IE6.0+、FF2+、Safari2.0+、Opera9.0+。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/tablesorter.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://tablesorter.com/" target="_blank">tablesorter</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> csv2table <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>csv2table这个插件能够将CVS文件（利用Excel创建）的内容转换成HTML Table。</p> <p>jQuery表格排序插件，点击表格中对应列的头部单元，表格立即重新排序。</p> <p><a href="http://tablesorter.com/docs/" target="_blank">Tablesorter</a> | <a href="http://tablesorter.com/docs/#Demo" target="_blank">Demo</a></p> <br /></p><p><br /></p><p><a href="http://plugins.jquery.com/project/csv2table" target="_blank">csv2table</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> tableFormSynch <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>tableFormSynch 是一个表格与表单数据相互更新的jQuery插件。它提供的功能包括：基于表单中的数据，新增行。删除所选择行，并清除表单中的所有数据。  tableFormSynch支持所有表单控件包括：checkboxes、radio、buttons 与&lt;select&gt;。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/tableFormSynch.jpg" border="0" /><br /></p><p><a href="http://www.swartzfager.org/blog/jQuery/plugins/tableFormSynch/" target="_blank">tableFormSynch</a><br /></p><p><br /></p><p>引自:http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html</div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div class="posthead"> 			<h2> 				<a id="cb_post_title_url" class="singleposttitle" href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557296.html">超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类</a> 			</h2> 			Posted on <span id="post-date">2009-08-31 14:57</span> <a href="http://www.cnblogs.com/hcbwei/">hcb</a> 阅读(2222) 评论(<span id="post-comment-count">0</span>)  <a href="http://www.cnblogs.com/hcbwei/admin/EditPosts.aspx?postid=1557296" rel="nofollow">编辑</a> <a href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557296.html#">收藏</a> 			<img src="http://www.cnblogs.com/hcbwei/aggbug/1557296.html?type=1&amp;webview=1" alt="" height="1" width="1" /> 			 		</div> 		<div id="cnblogs_post_body"><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Farbtastic <br /></p><p><br /></p><p>Farbtastic是一个color picker插件。它能够在一个页面中加入多个颜色选择控件，然后每个控件关联到页面中的一个元素比如：文本输入框。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Farbtastic.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://acko.net/dev/farbtastic" target="_blank">Farbtastic</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Color Picker <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个简单的颜色选择控件。操作方式与Adobe Photoshop中颜色选择操作置。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Color_Picker.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://eyecon.ro/colorpicker/" target="_blank">jQuery Color Picker</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> iColorPicker <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>iColorPicker是一个只有6KB大小的jQuery Color Picker。只要将输入框的class属性设置为“iColorPicker”就能变一个漂亮的颜色选择器。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/colorpicker.gif" border="0" /><br /></p><p><br /></p><p><a href="http://www.supersite.me/website-building/jquery-free-color-picker/" target="_blank">iColorPicker</a><br /></p><p><br /></p><p><br /></p><p><p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />右键菜单类</span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> ContextMenu <br /></p><p><br /></p><p>用于创建右键弹出菜单的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/ContextMenu.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.trendskitchens.co.nz/jquery/contextmenu/" target="_blank">ContextMenu</a><br /></p><p><br /></p><p></p> <p>&nbsp;</p> <p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />图片新闻flash展示类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> imgAreaSelect <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>imgAreaSelect这个jQuery插件能够选取一张图片中一个矩形区域。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/imgAreaSelect.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://odyniec.net/projects/imgareaselect/" target="_blank">imgAreaSelect</a><br /></p><p><br /></p><p>&nbsp;<img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Easy Slide <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>EasySlide 是以jQuery为基础开发的一个图库展示插件，EasySlide可以将任何一个网页容器(Container)内的图形自动将其排列展示，并加上鼠标指向时的暂停效果(Pause)，可以当作图库展示或是动画及广告Banner使用。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Easy-Slide.jpg" border="0" height="326" width="400" /><br /></p><p><br /></p><p><a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access&amp;lan=gb" target="_blank">Easy Slide</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Easy News <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Easy News是一个可以让您轻松显示网站新闻或图文内容展示的jQuery插件，可设定Fade In-Out ,Slide Up-Down, Left To Right 的效果，调整显示速度，可自行修改CSS改变您为喜欢的风格。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Easy-News.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access&amp;lan=gb" target="_blank">Easy News</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Easy News Plus <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Easy News Plus是基于Easy News开发，滚动式新闻或图文内容展示的jQuery插件，但是与Easy News有完全不同的显示方式(以左右滑动为主要的显示方法)。<br /></p><p><br /></p><p><a href="http://www.ezjquery.com/cgi-bin/webapp.rb?r=access&amp;lan=gb" target="_blank">Easy News Plus</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQZoom <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>基于jQuery开发的图片放大镜插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQZoom.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.mind-projects.it/blog/jqzoom_v10" target="_blank">jQZoom</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Plugin: Text Highlight <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>利用javascript对页面中的关键字进行着色的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/092302.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html" target="_blank">jQuery Plugin: Text Highlight</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jCarousel Lite <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery插件能够帮助你以滚动（carousel）的方式来组织图片和其它内容。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jCarousel_Lite.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.gmarwaha.com/jquery/jcarousellite/index.php" target="_blank">jCarousel Lite</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jCarousel <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jCarousel是一个jQuery插件用于控制一个列表项目的水平或垂直顺序，列表项目的内容可以是静态HTML内容或通过AJAX加载的内容。可以向前或向后滚动。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jCarousel.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://sorgalla.com/projects/jcarousel/" target="_blank">jCarousel</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Spacegallery-Jquery <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个采用jQuery开发，类似于Flash效果的图库（image gallery）。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Spacegallery-Jquery.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://eyecon.ro/spacegallery/" target="_blank">Spacegallery-Jquery</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Slider Gallery <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个基于jQuery开发相册控件，类似于Apple网站上用于展示产品的效果。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Slider_Gallery.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://jqueryfordesigners.com/slider-gallery/" target="_blank">jQuery Slider Gallery</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Cycle Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery Cycle Plugin是一个slideshow插件。支持多种变换效果：shuffle、zoom、fade、turnDown、curtainX、scrollRight。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Cycle_Plugin.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.malsup.com/jquery/cycle/" target="_blank">jQuery Cycle Plugin</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Zoomimage <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>该jQuery插件能够让以当前流行的方式来展示图片。提供：预加载图片提示，对图片进行分组，自动调整图片显示比例，图片分组浏览控制。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Zoomimage.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://eyecon.ro/zoomimage/" target="_blank">Zoomimage</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> prettyPhoto <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>prettyPhoto是jQuery lightbox的一个“克隆”。并增加动画效果，图库浏览等特性。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/prettyPhoto.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.no-margin-for-errors.com/projects/prettyPhoto/" target="_blank">prettyPhoto</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> ThickBox <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>ThickBox是一个模式对话框UI控件。基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax获取的内容。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/ThickBox.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://jquery.com/demo/thickbox/" target="_blank">ThickBox</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Galleria <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Galleria 是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以在图片加载时执行一些动作。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/galleria.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://devkick.com/lab/galleria/" target="_blank">Galleria</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Flash Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个jQuery插件用于在页面中嵌入Flash影片。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Flash_Plugin.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://jquery.lukelutman.com/plugins/flash/" target="_blank">jQuery Flash Plugin</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery.SerialScroll <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery.SerialScroll是一个用于创建滚动效果的jQuery插件，支持水平／垂直方向滚动和混合滚动效果。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery.SerialScroll.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://flesler.blogspot.com/2008/02/jqueryserialscroll.html" target="_blank">jQuery.SerialScroll</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> InnerFade <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>InnerFade这个jQuery插件能够让任意一组元素（img，div等）实现淡入淡出播放效果。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/InnerFade.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://medienfreunde.com/lab/innerfade/" target="_blank">InnerFade</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> NyroModal <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个基于jQuery开发，非常灵活和可定制外观/动画效果的模式对话框。可通过Ajax调用目标内容，改变对话框大小等。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/NyroModal.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://nyromodal.nyrodev.com/" target="_blank">NyroModal</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> CrossSlide <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>CrossSlide这个jQuery插件实现了一些常用Javascript幻灯片放映动画效果如：动态地移动、缩放、渐变、滑入"滑出等。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/CrossSlide.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.gruppo4.com/%7Etobia/cross-slide.shtml" target="_blank">CrossSlide</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Magnify <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Magnify是一个能够在图片上添加放大镜功能的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Magnify.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.jnathanson.com/index.cfm?page=pages/jquery/magnify/magnify" target="_blank">Magnify</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Img Notes <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>用于当鼠标移到图片是时，显示一个信息提示框。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Img-Notes.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.sanisoft.com/blog/2008/05/26/img-notes-jquery-plugin/" target="_blank">Img Notes</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> FancyZoom <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>FancyZoom采用缩放效果来展示图片或任意HTML页面，不需要另外开启页面来载入图片，其效果在Apple Mac的官方网站中也有。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/iphoto_zoom.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.cabel.name/2008/02/fancyzoom-10.html" target="_blank">FancyZoom</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Jcrop <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Jcrop 是一个跨浏览器的jQuery图片剪切插件（<strong>jQuery image crop plugin</strong>）。支持对剪切框加CSS样式，当选取或拖动时添加回调事件（Callbacks），剪切时能够约束宽度与高度。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jquery-image-crop-plugin.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://deepliquid.com/content/Jcrop.html" target="_blank">Jcrop</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Galleriffic <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jquery-gallery-plugin.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.twospy.com/galleriffic/" target="_blank">Galleriffic</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Image Upload and Auto Crop <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>采用PHP+jQuery开发的图片上传和剪切（Crop）工具。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Image_Upload_and_Auto_Crop.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/" target="_blank">Image Upload and Auto Crop</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> prettyGallery <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>prettyGallery是一个图库导航控件Slider。基于jQuery开发，除了可以导航图片之外，还支持其它任何内容。可以配置导航滚动速度和图片标题说明。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/prettyGallery.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.no-margin-for-errors.com/projects/prettyGallery/" target="_blank">prettyGallery</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery.popeye <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery.popeye  这个插件能够将一组无序的图片列表转换成一个简单的相册。当点击图片时将以Lightbox风格放大图片。图片展示框提供向前/向后控制并能够为每一张图 片添加备注说明信息。jQuery.popeye能够根据图片大小自动调整展示框的高度和宽度。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery.popeye.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://herr-schuessler.de/blog/jquerypopeye-an-inline-lightbox-alternative/" target="_blank">jQuery.popeye</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> s3Slider <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>s3Slider 是一个jQuery slideshow插件，效果类似于<a href="http://smoothslideshow.jondesign.net/timed.html" target="_blank">smooth slideshow</a>。<br /></p><p><br /></p><p>可以在图片上的任意位置，透明显示当前所放映图片的说明信息。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/s3Slider.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.serie3.info/s3slider/" target="_blank">s3Slider</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Pirobox <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>采用jQuery开发的Lightbox控件。能够根据浏览器窗体大小自动调整展示图片大小。提供向前/向后控制链接。动态加载图片效果。易于定制。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Pirobox.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://designshack.co.uk/tutorials/pirobox-jquery-lightbox" target="_blank">Pirobox</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Simple Controls Gallery <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个采用jQuery开发的图片slideshow控件。提供一个暂停/播放/向前/向后展示的控制菜单。这个jQuery slideshow可以设置当页面打开时自动播放图片并能够将最近查看的图片存储在cookie中。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_slideshow.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.dynamicdrive.com/dynamicindex4/simplegallery.htm" target="_blank">Simple Controls Gallery</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Agile Carousel <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Jquery Slideshow插件。易于定制图片切换效果。提供开/关图片标题显示，添加文本水印等功能。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Agile_Carousel.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://code.google.com/p/agile-carousel/" target="_blank">Agile Carousel</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Plugin-Page Peel <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个用于创建Page Peel(卷页/页面剥落)特效的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/PagePeel1.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://smple.com/2008/12/15/jquery-plugin-page-peel/" target="_blank">jQuery Plugin-Page Peel</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Easy Slider <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>一个jQuery插件，当点击导航按纽时可以水平或垂直播放图片或其它任何内容。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Easy_Slider.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider" target="_blank">Easy Slider</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> imgPreview <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>图片预览jQuery插件。当鼠标移到图片链接上时，会在链接的旁边出现一个类似于tooltip效果的图片展示框。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/imgPreview.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/" target="_blank">imgPreview</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Jquery Fade In.Fade Out <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个用于让图片产生淡入淡出效果的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jquery_fade_big.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://hv-designs.co.uk/2009/01/19/jquery-fade-infade-out/" target="_blank">Jquery Fade In.Fade Out</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Captify <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery插件能够在图片上显示标题信息，当鼠标放到图片上时滑动出现。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Captify.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://masterfidgeter.com/projects/captify/" target="_blank">Captify</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jParallax <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个用于生成视差现象的jQuery插件。<a href="http://www.piksite.com/mParallax/" target="_blank">mParallax</a>能够产生的效果与jParallax一样但采用Mootools框架开发。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jparallax-jquery.jpg" border="0" /><br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/mParallax.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://webdev.stephband.info/parallax.html" target="_blank">jParallax</a><br /></p><p> <h2 class="entry-title">jQuery---运用图片预加载技术打造幻灯片<br /></p><p><br /></p><p>截图：<br /></p><p><a title="http://www.cssrain.cn" href="http://www.cssrain.cn/attachments/month_0904/i2009420234622.jpg" target="_blank" rel="lightbox"><img alt="" src="http://www.cssrain.cn/attachments/month_0904/i2009420234622.jpg" border="0" /></a><br /></p><p><br /></p><p><a title="http://www.cssrain.cn" href="http://www.cssrain.cn/attachments/month_0904/j200942023467.jpg" target="_blank" rel="lightbox"><img alt="" src="http://www.cssrain.cn/attachments/month_0904/j200942023467.jpg" border="0" /></a><br /></p><p><br /></p><p><br /></p><p>一些演示：<br /></p><p><a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo2.html</a><br /></p><p><br /></p><p><a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo2/demo3.html</a><br /></p><p><a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo3/demo4.html</a><br /></p><p><br /></p><p><a href="http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/Demo1/demo1.html</a> (以前做的，非预加载)<br /></p><p><br /></p><p>下载：<br /></p><p><a href="http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar" target="_blank">http://www.cssrain.cn/demo/jQueryImgLoad/jQueryImgLoad.rar</a></h2> <p><u><font color="#800080">jQuery pageSlide</font></u> </p> <p align="center"><u><font color="#800080"><img alt="11种控制内容展示的JavaScript特效" src="http://www.bbon.cn/wp-content/uploads/2009/04/2225415Vj.jpg" height="120" width="430" /></font></u></p> <p>jQuery pageSlide 是一个jQuery插件，它可以控制一个隐藏页面的显示和关闭。具体来说，就是当前页占一个完整页面，隐藏页是看不到的，你设置一个控制的地方，点击该控制时触发事件，隐藏的页面就弹出来。再次点击隐藏页面以外的空间，它就又关闭。</p> <p>这适合在有限的空间里，在主页里放重要内容，而隐藏页放一些并不一定要显示，而是有需要的用户才去展开显示的内容。</p> <p><u><font color="#800080">Creating a Slick Auto-Playing Featured Content Slider</font></u> </p> <p align="center"><u><font color="#800080"><img alt="11种控制内容展示的JavaScript特效" src="http://www.bbon.cn/wp-content/uploads/2009/04/222544N5F.jpg" height="283" width="430" /></font></u></p> <p>Niall Doherty的 Coda Slider 为许许多多的设计师带来了灵感. Chris Coyier 创建的这个Slick  Auto-Playing Featured Content Slider 使用 Coda Slider插件  ，实现我们常说的”图片焦点特效”。多用于门户站。</p> <p><u><font color="#800080">Portfolio Layout Idea Using jQuery</font></u> </p> <p align="center"><u><font color="#800080"><img alt="11种控制内容展示的JavaScript特效" src="http://www.bbon.cn/wp-content/uploads/2009/04/222543kgz.jpg" height="277" width="430" /></font></u></p> <p>非常漂亮的一个特效布局。由 Benjamin Sterling 创建的这个 portfolio layout 使用了jQuery的 easing plugin. 适合那些想用来展示个人作品集的用户。</p> <p>它在页面两边显示带缩略的作品列表，当你点击每个条目时，会在中间部分以退场然后进场的特效呈现出该作品的全部内容。</p> <p>jQuery---图片先模糊后清楚<br /></p><p><a href="http://www.hotbook.cn/">http://www.hotbook.cn/</a></p> <p>&nbsp;</p> <p>很多图片网站用了这种技术，Google图片中心也不例外。<br /></p><p>这种技术的图片是先显示模糊的，然后再显示清楚的。</p> <p>这个模糊的原理就是 一张小图片，然后把尺寸放大，大小等于大图片的宽度和高度。<br /></p><p>小图片被拉大了，理所当然就模糊了。</p> <p>试想：小图片的尺寸是10kb,大图片的大小是500kb，那么加载小图片的速度就是大图片的50倍。<br /></p><p>当然你会说，如果直接显示大图片是什么情况呢？答案是：一片空白等着你。</p> <p>演示：<br /></p><p><a href="http://www.cssrain.cn/demo/loadImages/loadimages.html">http://www.cssrain.cn/demo/loadImages/loadimages.html</a><br /></p><p></p> <p>&nbsp;使用jQuery实现网页报纸</p> <p>演示：<br /></p><p><a href="http://www.cssrain.cn/demo/jquerynewspager/demo.html">http://www.cssrain.cn/demo/jquerynewspager/demo.html</a></p> <p>原理：使用报纸内容作为 背景图，相对定位。<br /></p><p>然后里面的div设置为绝对定位，大小，left和top都要跟背景图匹配。<br /></p><p>所以这个有一定的规律。</p> <p>下载：<br /></p><p><a href="http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar">http://www.cssrain.cn/demo/jquerynewspager/jquerynewspager.rar</a></p> <p>引申：<br /></p><p>当后台人员问，每次要传坐标，宽度和高度不麻烦么？用户知道使用么？<br /></p><p>教用户使用photoshop？。。。！！！<br /></p><p>解决方案：<br /></p><p>使用图片截图的插件即可，一般的截图插件都能获取4个坐标，宽度和高度，<br /></p><p>当然我们只需要这些，并不需要把图片真正截取下来。</p> <p>&nbsp;</p> <h2 class="entry-title"><a class="entry-title-link" href="http://item.feedsky.com/%7Efeedsky/cssrain/%7E6110346/210407560/4218245/1/item.html" target="_blank">jQuery购物网站产品展示.  </a></h2> <div class="entry-author">作者：<span class="entry-author-name"><a href="mailto:cssrain@gmail.com%28admin">cssrain@gmail.com(admin</a>)</span></div>     <div><br /></p><p><a title="http://www.cssrain.cn" href="http://www.cssrain.cn/attachments/month_0904/b2009430192719.jpg" target="_blank" rel="lightbox"><img alt="" src="http://www.cssrain.cn/attachments/month_0904/b2009430192719.jpg" border="0" /></a><br /></p><p><br /></p><p>程序介绍：<br /></p><p>1，点击大图可以弹出遮罩效果.<br /></p><p>2，下方小图可以左右滚动.<br /></p><p>3，点击新窗口打开，可以打开当前的大图片.<br /></p><p>4，遮罩层中小图也可以左右滚动，也可以打开大图片.<br /></p><p><br /></p><p>在 IE6,IE7,Firefox3 &amp; google 浏览器下测试通过.<br /></p><p><br /></p><p><br /></p><p>演示：<br /></p><p><a href="http://www.cssrain.cn/demo/jqueryProduct/demos.html" target="_blank">http://www.cssrain.cn/demo/jqueryProduct/demos.html</a><br /></p><p><br /></p><p>下载：<br /></p><p><a href="http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar" target="_blank">http://www.cssrain.cn/demo/jqueryProduct/jqueryProduct.rar</a></div> <div>&nbsp;</div> Gallerific  <p align="center"><a href="http://www.twospy.com/galleriffic/index.html" target="_blank"><strong><img alt="" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-11.png" /></strong></a></p> <p><a href="http://www.twospy.com/galleriffic/index.html" target="_blank">Galleriffic</a> 是使用 Mike Alsup 的 <a href="http://www.bbon.cn/jQuery%20Cycle%20plugin" target="_blank">jQuery Cycle plugin</a> 创建的图片展示效果，包括缩略图、图片标题和描述等详细功能，是一个非常不错的高质量画廊相册展示工具。</p> <h5>2，ZoomImage</h5> <p><a href="http://hotajax.org/jquery/photos-other-plugins/554-zoomimage-jquery-plugin.html" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-14.png" /></a></p> <p><a href="http://hotajax.org/jquery/photos-other-plugins/554-zoomimage-jquery-plugin.html" target="_blank">zoomimage</a> ，以一种独具魅力的方式展示图片效果。缩略图链接在本页弹出大图，并且可以可以随意拖拽该悬浮图片。</p> <h5>3，EasySlider</h5> <p align="center"><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" target="_blank"><strong><img alt="" src="http://www.ajaxline.com/files/easyslider.png" height="140" width="450" /></strong></a></p> <p><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" target="_blank">Easy Slider</a> 可以实现图片或其他任意内容，在水平或垂直方向上的滑动效果，你还可以通过 CSS 自定义设置样式。</p> <h5>4，The Slider from Barack Obama’s website</h5> <p align="center"><a href="http://devthought.com/barackslideshow-an-elegant-lightweight-slideshow-script/" target="_blank"><img alt="" src="http://www.vivalogo.com/vl-resources/images/bs.jpg" /></a></p> <p>一个源自美国总统 Barack Obama 网站的垂下滑动菜单控制的图片幻灯效果。</p> <h5>5，CodaSlider</h5> <p align="center"><a href="http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/" target="_blank"><img alt="" src="http://www.ajaxline.com/files/coda-slider.png" /></a></p> <p><a href="http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/" target="_blank">CodaSlider</a>，又一个不错的滑动控制效果。</p> <h5>6，jQuery Slider II</h5> <p align="center"><a href="http://benjaminsterling.com/jquery-jqgalviewii-photo-gallery/" target="_blank"><img alt="" src="http://www.vivalogo.com/vl-resources/images/jgv2.jpg" /></a></p> <p><a href="http://benjaminsterling.com/jquery-jqgalviewii-photo-gallery/" target="_blank">jQuery Slider II</a> 的布局非常符合操作习惯，在底部列出带滚动条的缩略图控制列表，然后在上面显示对应图片的大图浏览，非常适合做高级相册。</p> <h5>7，Beautiful Slider&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5> <p align="center"><a href="http://dreamcss.blogspot.com/2009/04/create-beautiful-jquery-sliders.html" target="_blank"><strong><img alt="" src="http://lh4.ggpht.com/_zffIzal5cfI/SfKjCa2AxDI/AAAAAAAADjo/zY079AhPW5M/jQuerysliders_thumb8.png?imgmax=800" height="181" width="450" /></strong></a></p> <p><a href="http://dreamcss.blogspot.com/2009/04/create-beautiful-jquery-sliders.html" target="_blank">Beautiful Slider</a>， 光看这个效果图你就知道这个插件有多棒了吧，是的，这个插件实现的效果已经不逊色于Flash完成的效果，整体表现流畅，文字显示效果更是创意独特。</p> <h5>８，LoopedSlider</h5> <p><a href="http://code.google.com/p/loopedslider/" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="" src="http://www.ajaxline.com/files/looped.png" /></a></p> <p><a href="http://code.google.com/p/loopedslider/" target="_blank">loopedSlider</a>是又一个任意内容滚动切换的幻灯片插件，使用操作简单。</p> <h5>9，SpaceGallery</h5> <p><a href="http://eyecon.ro/spacegallery/" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="Accessible news slider" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/08/spacegallery.png" /></a></p> <p><a href="http://eyecon.ro/spacegallery/" target="_blank">SpaceGallery</a>是一个全新的jQuery插件，点击当前图片，会自动放大消失，同时后面的图片向前展示，有一种时光机器的感觉。</p> <h5>10，jQuery Popeye</h5> <p><a href="http://plugins.jquery.com/project/popeye" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="" src="http://blueprintds.com/wp-content/uploads/2009/01/picture-13.png" /></a></p> <h5>11，Noobslide&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5> <p><a href="http://www.efectorelativo.net/laboratory/noobSlide/" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="Noobslide" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/07/nooblide-advanced-tutorial.png" /></a></p> <h5>12，Accessible News Slider&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5> <p><a href="http://www.reindel.com/accessible_news_slider/" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="Accessible news slider" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/08/accessible-news-slider.jpg" /></a></p> <h5>13，SmoothGallery&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></h5> <p><a href="http://smoothgallery.jondesign.net/" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="SmoothGallery" src="http://www.catswhocode.com/blog/wp-content/uploads/cwc_smoothgallery.png" /></a></p> <p><a href="http://smoothgallery.jondesign.net/" target="_blank">SmoothGallery</a>是一个最好的 Javascript 幻灯片效果之一，可以实现各种不同的幻灯片转换效果。</p> <h5>14，jQuery Multimedia Portfolio</h5> <p><a href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="jQuery Multimedia Portfolio" src="http://www.catswhocode.com/blog/wp-content/uploads/2008/08/multimedia-portfolio.png" /></a></p> <p><a href="http://www.openstudio.fr/jQuery-Multimedia-Portfolio.html" target="_blank">jQuery Multimedia Portfolio</a>是一个基于jQuery 的滑动效果插件,除了可以展示图片之外，还可以加入各种不同类型的多媒体文件。</p> <h5><strong>15，s3Slider</strong><a href="http://www.piksite.com/carousel.us/" target="_blank"> </a></h5> <p><a href="http://www.serie3.info/s3slider/" target="_blank"><img style="display: block; float: none; margin-left: auto; margin-right: auto;" alt="" src="http://images.sixrevisions.com/2009/03/13-09_slideshow.jpg" height="187" width="450" /></a></p> <p><a href="http://www.serie3.info/s3slider/" target="_blank">s3Slider</a>是一个非常简单实用的流畅幻灯片效果，这个插件被应用在无数的WordPress专业主题模板中。</p> <p>via: <a href="http://blarnee.com/wp/jquery-image-carousels-for-slidehow/" target="_blank">15 jQuery image carousels for slideshows and galleries</a></p></div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">超强的jquery极品插件--导航类 / 验证类</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div class="posthead"> 			<h2> 				<a id="cb_post_title_url" class="singleposttitle" href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557298.html">超强的jquery极品插件--导航类 / 验证类</a></h2><br /></p><p></div> 		<div id="cnblogs_post_body"><p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />导航类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p>jQuery plugin: Treeview <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个插件能够把无序列表转换成可展开与收缩的Tree。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Treeview.jpg" border="0" /> <br /></p><p><br /></p><p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/" target="_blank">jQuery plugin: Treeview</a><br /></p><p></p> <p>&nbsp;<img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> FastFind Menu Script <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>可拖动的嵌套菜单窗体，基于动态"AJAX"响应。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/FastFind_Menu_Script.jpg" border="0" /><br /></p><p><br /></p><p><br /></p><p><a href="http://labs.activespotlight.net/jQuery/menu_demo.html" target="_blank">FastFind Menu Script</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> iconDock <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>iconDock一个基于jQuery开发的Fisheye menu。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Dockexample.png" border="0" /><br /></p><p><br /></p><p><a href="http://icon.cat/wiki/IconDock_En#iconDock_jQuery_Plugin" target="_blank">iconDock&nbsp;</a><a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery UI Tabs <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery UI Tabs：一个功能强大，易于使用的Tab控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQueryUITabs1.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.stilbuero.de/jquery/tabs" target="_blank">jQuery UI Tabs</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jstree <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p><a href="http://code.google.com/p/jstree/" target="_blank">jsTree</a>是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖"放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。 <br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jstree.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://code.google.com/p/jstree/" target="_blank">jstree</a><br /></p><p>&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery File Tree <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观，指定文件树展开图标，可以自己定义展开／收缩事件、速度，配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_File_Tree.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://abeautifulsite.net/notebook.php?article=58" target="_blank">jQuery File Tree</a><br /></p><p>&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Superfish <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery菜单插件。支持水平/垂直方向。弹出子菜单不会被&lt;SELECT&gt;标签挡住。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Superfish.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://users.tpg.com.au/j_birch/plugins/superfish" target="_blank">Superfish</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> accordion menu <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Accordion风格的jQuery菜单。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/accordion-menu.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html" target="_blank">accordion menu</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> CSS Dock Menu <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>采用jQuery+CSS实现，仿Mac Dock Menu的一个导航菜单。 <br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/css-dock-menu.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.ndesign-studio.com/blog/design/css-dock-menu/" target="_blank">CSS Dock Menu</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> CheckTree <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>带Checkbox的树型jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/CheckTree.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://static.geewax.org/checktree/index.html" target="_blank">CheckTree</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> idTabs <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>idTabs是一个能够创建简单到复杂Tab控件的jQuery插件。支持动态添加和选择Tab，idTabs能够绑定到不同的事件如mouseover。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/idTabs.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.sunsean.com/idTabs/" target="_blank">idTabs</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Context Menu <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery Context Menu是一个右键菜单插件。通过非常少的设置就能够轻松实现右键菜单功能。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Context_Menu.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.abeautifulsite.net/notebook/80" target="_blank">jQuery Context Menu</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Right-click <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个插件能够让你使用jQuery来捕获由鼠标右键触发的事件。这些事件包括：click、mouseup、mousedown。<br /></p><p><br /></p><p><a href="http://www.abeautifulsite.net/notebook/68" target="_blank">jQuery Right-click</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Multi Level CSS Menu <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个多级水平CSS菜单，利用规则嵌套的HTML列表标签创建。当子菜单靠近窗体右边缘时，将自动调整展示方面。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Multi_Level_CSS_Menu.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/" target="_blank">jQuery Multi Level CSS Menu</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> ListNav <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>ListNav是一个用于创建按字母顺序分类导航的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/ListNav.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.ihwy.com/Labs/jquery-listnav-plugin.aspx" target="_blank">ListNav</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Simpletip <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Simpletip是一个基于jQuery开发的Tooltips控件。Tooltips可以附在任意元素（标签）之上。并定制展示方式与位置。tooltips可以是静态，动态或通过Ajax加载。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Simpletip.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://craigsworks.com/simpletip/" target="_blank">Simpletip</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Smooth Navigation Menu <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Smooth Navigation Menu是一个采用jQuery开发，基于CSS的多层级网站导航菜单。菜单项的内容既可以直接从当前页面中获取，也可以从一个外面文件或通过Ajax获取。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Smooth_Navigational_Menu.jpg" border="0" height="194" width="432" /><br /></p><p><br /></p><p><a href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" target="_blank">Smooth Navigation Menu</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jdMenu <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jdMenu是用于创建水平/垂直分层下拉菜单的jQuery插件.支持通过Ajax加载菜单项，自定义动画效果，易于定制外观，支持相对(relative)与绝对(absolute) 定位等。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jdMenu.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://jdsharp.us/jQuery/plugins/jdMenu/" target="_blank">jdMenu</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jqDock <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个能够将一组图片转换成类似于Mac风格鱼眼菜单(Dock Menu)的jQuery插件。菜单可以是水平方向或垂直方向。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jqDock.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.wizzud.com/jqDock/" target="_blank">jqDock</a></p> <p><br /></p><p>&nbsp;</p> <p>&nbsp;&nbsp;<a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/" target="_blank">Animated Menu using jQuery</a> </p> <p>A technique for animating menu items when a user hovers over them. Source files, including the PSD file, are available to download.</p> <p><a href="http://www.shopdev.co.uk/blog/menuDemo.html" target="_blank"><img alt="Animated Menu using jQuery" src="http://images.sixrevisions.com/2009/04/29-07_animated_menu.jpg" height="151" width="500" /></a></p> <p><a href="http://www.shopdev.co.uk/blog/menuDemo.html" target="_blank">View Demo Page</a></p> <p>&nbsp;</p> <p>&nbsp;<a href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/" target="_blank">Garagedoor Effect using jQuery</a> </p> <p><a href="http://www.gayadesign.com/about/" target="_blank">Gaya Kessler</a> presents a wonder JavaScript menu that mimics the real garage door using jQuery.</p> <p><a href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank"><img alt="Garagedoor Effect using jQuery" src="http://images.sixrevisions.com/2009/04/29-01_garage_door.jpg" height="109" width="500" /></a></p> <p><a href="http://www.gayadesign.com/scripts/jquerygaragedoor/" target="_blank">View Demo Page</a></p> <p>&nbsp;</p> <p><a href="http://sonicradish.com/labs/jGlideMenu/current/?src=ASL_LAB" target="_blank">JGlide Menu</a> </p> <p>A very unique menu that floats on the page. Users can drag it to a position they desire.</p> <p><a href="http://sonicradish.com/labs/jGlideMenu/current/static_demo.html" target="_blank"><img alt="JGlide Menu" src="http://images.sixrevisions.com/2009/04/29-18_jglide.jpg" height="200" width="500" /></a></p> <p><a href="http://sonicradish.com/labs/jGlideMenu/current/static_demo.html" target="_blank">View Demo Page</a></p> <p>&nbsp;</p> <p>&nbsp;<a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/" target="_blank">Vertical Sliding jQuery Menu</a> </p> <p><a href="http://hv-designs.co.uk/" target="_blank">HVDesigns</a> presents a menu that drops down and reveals more links.</p> <p><a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_blank"><img alt="Sliding jQuery Menu" src="http://images.sixrevisions.com/2009/04/29-03_verticle_sliding.jpg" height="192" width="500" /></a></p> <p><a href="http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html" target="_blank">View Demo Page</a></p> <p>&nbsp;</p> <p><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/" target="_blank">LavaLamp</a> </p> <p>When you hover an item, you’ll see the <a href="http://alistapart.com/articles/slidingdoors" target="_blank">CSS sliding door</a> technique created using jQuery. An alternate version for MooTols can be<a href="http://devthought.com/blog/projects-news/2007/01/cssjavascript-true-power-fancy-menu/" target="_blank"> here</a>.</p> <p><a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/" target="_blank"><img alt="LavaLamp" src="http://images.sixrevisions.com/2009/04/29-14_mootools_fancy_menu.jpg" height="96" width="500" /></a></p> <p>&nbsp;</p> <p>&nbsp;</p> <h3>11. <a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank">Sliding JavaScript Menu Highlight</a></h3> <p>This sliding hover effect script is an easy technique for highlighting menu items.</p> <p><a href="http://www.leigeber.com/2008/05/sliding-javascript-menu-highlight-1kb/" target="_blank"><img alt="Sliding JavaScript Menu Highlight" src="http://images.sixrevisions.com/2009/04/29-08_highlight_menu.jpg" height="107" width="500" /></a></p> <h3>12. <a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/" target="_blank">Fading Menu - Replacing Content</a></h3> <p>This technique allows you to fade in and fade out menu items.</p> <p><a href="http://css-tricks.com/examples/MenuFader/" target="_blank"><img alt="Fading Menu - Replacing Content" src="http://images.sixrevisions.com/2009/04/29-05_fading_menu.jpg" height="129" width="500" /></a></p> <p><a href="http://css-tricks.com/examples/MenuFader/" target="_blank">View Demo Page</a></p> <h3>13. <a href="http://javascript-array.com/scripts/simple_drop_down_menu/" target="_blank">Simple Multi-level Drop-Down Menu</a></h3> <p>A simple JavaScript drop down menu tutorial.</p> <p><a href="http://javascript-array.com/scripts/simple_drop_down_menu/" target="_blank"><img alt="Simple Multi-level Drop-Down Menu" src="http://images.sixrevisions.com/2009/04/29-06_multil_level_drop_down.jpg" height="167" width="500" /></a></p> <h3>14. <a href="http://snook.ca/archives/javascript/jquery-bg-image-animations/" target="_blank">Using jQuery for Background Image Animations</a></h3> <p>A technique for creating animated menus using jQuery and CSS background-position properties.</p> <p><a href="http://snook.ca/technical/jquery-bg/" target="_blank"><img alt="Using jQuery for Background Image Animations" src="http://images.sixrevisions.com/2009/04/29-12_background_position.jpg" height="150" width="500" /></a></p> <p><a href="http://snook.ca/technical/jquery-bg/" target="_blank">View Demo Page</a></p> <p>&nbsp;</p> <ol><li> <p>Tabpanel - jerichotab </p> <p>效果图:<br /></p><p><img alt="" src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-11_000339.png" border="0" height="37" width="433" /><br /></p><p>简介:<br /></p><p>jerichoTab是一款模拟 firefox 标签页的插件, 通过丰富的API可以轻松的实现动态添加, 删除, 激活tab, 当tab页过多时会在左右两段增加滚动条... <br /></p><p>导航:<br /></p><p><a href="http://www.cnblogs.com/fromearth/archive/2009/05/11/1453850.html" target="_blank">详细介绍</a> | <a href="http://www.ajaxplaza.net/jerichotab/jerichotab.htm" target="_blank">在线演示</a></p></li></ol><br /></p><p><p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />验证类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a><font color="#000000" size="2"> </font></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery plugin: Validation <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery校验插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Validation.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">jQuery plugin: Validation</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Masked Input Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Masked Input这个jQuery插件让用户能够按照预先设定好的固定格式输入数据(如日期、电话号码等)。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/input-mask.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://digitalbush.com/projects/masked-input-plugin" target="_blank">Masked Input Plugin</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery password strength meter <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>用于检测密码强度的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_password_strength_me.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://simplythebest.net/scripts/ajax/ajax_password_strength.html" target="_blank">jQuery password strength meter</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jVal <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery表单校验插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jVal_0-1-0_pod_ss.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.overset.com/2008/07/31/jval-jquery-form-field-validation-plugin/" target="_blank">jVal</a><br /></p><p><br /></p><p>&nbsp; 引自:http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html</div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">超强的jquery极品插件--上传类/时间日期类 /虚拟键盘类 /圆角类热</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div class="posthead"> 			<h2> 				<a id="cb_post_title_url" class="singleposttitle" href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557301.html">超强的jquery极品插件--上传类/时间日期类 /虚拟键盘类 /圆角类热</a></h2><br /></p><p></div> 		<p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />上传类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jqUploader <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>结合Javascript与Flash开发，拥有上传进度条的文件上传控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jqUploader.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.pixeline.be/experiments/jqUploader/test.php" target="_blank">jqUploader</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Multiple File Upload Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>多文件上传插件（jQuery.MultiFile）能够让用户一次性选择多个要上传的文件。此外该插件还提供一些基本的校验功能比如：文件扩展名校验。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery.MultiFile.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.fyneworks.com/jquery/multiple-file-upload/" target="_blank">jQuery Multiple File Upload Plugin</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery: Ajax file upload <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Ajax文件上传插件让用户能够很方便地上传多个文件而无需刷新页面。此外，可以使用任何元素（图片，文字，按纽等）来触发文件选择窗口。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Ajax_file_upload.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://valums.com/projects/ajax-upload/" target="_blank">jQuery: Ajax file upload</a><br /></p><p><br /></p><p><br /></p><p></p> <p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />时间日期类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery UI Datepicker <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>基于jQuery开发的日期选择控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_UI_Datepicker.jpg" border="0" /><br /></p><p><br /></p><p></p> <p><a href="http://marcgrabanski.com/code/ui-datepicker/" target="_blank">jQuery UI Datepicker</a></p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Date Picker <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Date Picker一个采用jQuery开发的日期选择控件。支持同时显示多个月份日历，标记特殊日期，易于通过CSS定制外观，自定义周的第一天，自定义月份和星期的显示名称。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Date_Picker.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://eyecon.ro/datepicker/" target="_blank">Date Picker</a> <br /></p><p></p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Date Range Picker <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>基于jQuery UI1.6与jQuery UI CSS框架开发的日期选择控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Date_Range_Picker.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/" target="_blank">Date Range Picker</a><br /></p><p><br /></p><p></p> <p>&nbsp;</p> <p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />圆角类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Corner <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>不需要图片就能够创建各种圆角形状的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Corner.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.malsup.com/jquery/corner/" target="_blank">jQuery Corner</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> JQuery Curvy Corners <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>用于创建圆角的jQuery插件。压缩之后大小只有9k。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/JQuery_Curvy_Corners.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://blue-anvil.com/jquerycurvycorners/test.html" target="_blank">JQuery Curvy Corners</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Corner <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>更多圆角效果的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQueryCorner1.jpg" border="0" /><br /></p><p><br /></p><p></p> <p><a href="http://www.methvin.com/jquery/jq-corner-demo.html" target="_blank">jQuery Corner</a></p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Corners <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这是一个用于创建漂亮圆角效果的jQuery插件。不需要用到图片或其它特殊的标签。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Corners.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.atblabs.com/jquery.corners.html" target="_blank">jQuery Corners</a><br /></p><p>&nbsp;</p> <p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />评价类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Ajax Rater Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>能够动态创建Ajax Rater的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_Ajax_Rater_Plugin.jpg" border="0" /><br /></p><p><br /></p><p></p> <p><a href="http://www.m3nt0r.de/devel/raterDemo/" target="_blank">jQuery Ajax Rater Plugin</a></p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Star Rating widget <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>采用jQuery框架开发的评价控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Star_Rating_widget.jpg" border="0" height="177" width="204" /><br /></p><p><br /></p><p><a href="http://orkan.jaslo4u.pl/star_rating/index.html" target="_blank">Star Rating widget</a><br /></p><p><br /></p><p>&nbsp; <img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Star Rating Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Star Rating Plugin是一个基于一组radio input boxes实现的星形评价控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Star_Rating_Plugin.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.fyneworks.com/jquery/star-rating/#tab-Overview" target="_blank">jQuery Star Rating Plugin</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Ajax Poll <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>利用jQuery的Ajax和动画效果并给合PHP开发的投票系统。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/poll-results.png" border="0" /><br /></p><p><br /></p><p><a href="http://nettuts.com/javascript-ajax/creating-a-dynamic-poll-with-jquery-and-php/" target="_blank">Ajax Poll</a></p> <p>&nbsp;</p> <h2 class="entry-title">jQuery 投票调查组件<span style="word-spacing: 0px; text-transform: none; color: #333333; text-indent: 0px; white-space: normal; letter-spacing: normal; border-collapse: separate;"></span></h2> <div class="entry-body"> <div> <div class="item-body"> <div> <p style="line-height: normal;">主要功能:</p> <p style="line-height: normal;"><font style="line-height: normal;" color="#339966">测试答题框</font></p> <p style="line-height: normal;"><font style="line-height: normal;" color="#339966">可作心理测试等测试题使用</font></p> <p style="line-height: normal;"><font style="line-height: normal;" color="#339966">问题和选项通过questions.xml设置</font></p> <p style="line-height: normal;"><font style="line-height: normal;" color="#339966">显示当前得分</font></p> <p style="line-height: normal;"><font style="line-height: normal;" color="#339966">显示当前答题进度</font></p> <p style="line-height: normal;"><font style="line-height: normal;" color="#339966">可作翻看选过的选项</font></p> <p style="line-height: normal;"><font style="line-height: normal;" color="#339966">通过不同的得分调取不同结果内容</font></p> <p style="line-height: normal;"><font color="#339966"><a href="http://nba.titan24.com/focus/kikx/testxml.html" target="_blank"><img alt="点击查看在线演示" src="http://cms.titan24.com/focus/kikx/testxml/a.png" /></a></font></p><font color="#339966"><span style="word-spacing: 0px; text-transform: none; color: #333333; text-indent: 0px; white-space: normal; letter-spacing: normal; border-collapse: separate;"> <p style="line-height: normal;"><a style="line-height: normal;" href="http://nba.titan24.com/focus/kikx/test.html" target="_blank">DEMO 地址 静态版本</a></p> <p style="line-height: normal;"><a style="line-height: normal;" href="http://nba.titan24.com/focus/kikx/testxml.html" target="_blank">DEMO 地址 XML 版本</a></p> <p style="line-height: normal;"><a style="line-height: normal;" href="http://kikx.googlecode.com/files/htestv2.rar" target="_blank">文件打包下载</a></p> <p style="line-height: normal;">下面是装载XML 版本的代码 完整的代码请 <a style="line-height: normal;" href="http://kikx.googlecode.com/files/htestv2.rar" target="_blank">打包下载</a></p></span></font></div></div></div></div> <p>&nbsp;</p> <p><span style="color: #008000;"><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span></p> <p><span style="color: #008000;"><span style="color: #008000;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243803.gif" /></span></span><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;">虚拟键盘类</span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p><br /></p><p></p> <p>&nbsp;</p> <p>在进行一些高安全性 Web 设计时，为了用户输入表单信息的安全，往往不希望用户直接通过实体鼠标进行操作，而是提供额外的 Web 虚拟鼠标来帮助用户完全某些隐私表单内容的输入，所以，就用到了本文提及的3个 JavaScript 安全虚拟键盘插件。<br /></p><p></p> <p style="text-align: center;"><img alt="" src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard.jpg" /></p> <h4><a href="http://keith-wood.name/keypad.html" target="_blank">自定义 jQuery 虚拟小键盘插件 plugin</a></h4> <p><strong>jQuery 小键盘</strong> 是一个用于创建安全表单输入的插件工具，提供友好的键盘界面接口。使得可以仅允许用户输入数字、字母等限制性操作。</p> <p style="text-align: center;"><a href="http://keith-wood.name/keypad.html" target="_blank"><img alt="keypad" src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard1.jpg" height="209" width="622" /></a></p> <h4><a href="http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard" target="_blank">jQuery 虚拟键盘</a></h4> <p><a href="http://designshack.co.uk/" target="_blank"><strong></strong></a>一个创建 <a href="http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard" target="_blank">jQuery 虚拟键盘</a> 的学习向导，教你一步一步地创建自己的jQuery 虚拟键盘，而且必须得 JavaScript 脚本可以免费下载。安全性高的 Web 虚拟键盘在金融类网站的和要求高安全性的表单操作中应用非常广泛。所以，学会如何编写一个优秀的Web 安全虚拟键盘非常有用。</p> <p style="text-align: center;"><a href="http://designshack.co.uk/tutorials/creating-a-virtual-jquery-keyboard" target="_blank"><img alt="vkeyboard" src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard2.jpg" height="243" width="622" /></a></p> <h4><a href="http://www.greywyvern.com/code/js/keyboard.html" target="_blank">Virtual keyboard 虚拟键盘</a></h4> <p>虚拟键盘被广泛应用在极高级别的网站开发中，包括在线银行类网站应用等。<strong>Virtual keyboards</strong> 能帮助我们防止键盘操作记录，阻止用户进行某些特殊按键的限制操作， <strong>virtual keyboard</strong> 使用简单，支持多种语言。</p> <p style="text-align: center;"><a href="http://www.greywyvern.com/code/js/keyboard.html" target="_blank"><img alt="Virtual-keyboard" src="http://www.bbon.cn/wp-content/uploads/2009/04/Virtual-keyboard3.jpg" height="294" width="623" /></a></p></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">超强的jquery极品插件--其它类</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div class="posthead"> 			<h2> 				<a id="cb_post_title_url" class="singleposttitle" href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557303.html">超强的jquery极品插件--其它类</a> 			</h2> 			Posted on <span id="post-date">2009-08-31 15:03</span> <a href="http://www.cnblogs.com/hcbwei/">hcb</a> 阅读(309) 评论(<span id="post-comment-count">0</span>)  <a href="http://www.cnblogs.com/hcbwei/admin/EditPosts.aspx?postid=1557303" rel="nofollow">编辑</a> <a href="http://www.cnblogs.com/hcbwei/archive/2009/08/31/1557303.html#">收藏</a> 			<img src="http://www.cnblogs.com/hcbwei/aggbug/1557303.html?type=1&amp;webview=1" alt="" height="1" width="1" /> 			 		</div> 		<span style="color: #008000;"><span style="color: #008000;">++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></span> <p><span style="font-size: 24pt;"><span style="color: #0000ff;"><span style="font-size: 24pt; color: #0000ff;"><img alt="" src="http://www.cnblogs.com/Emoticons/qface/055243485.gif" />其它类<a title="www.hotbook.cn" href="http://www.hotbook.cn/"><font size="2">热点图书：www.hotbook.cn</font></a></span></span></span></p> <p><span style="color: #008000;">+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</span></p> <p>&nbsp;</p> <p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> <span href="http://www.cnblogs.com/andylaufzf/archive/2009/03/26/tag.php?name=jquery">jquery</span>-aop <br /></p><p><br /></p><p>为 JavaScript增加面向方面编程特性的jQuery插件。它能给任何函数添加<a href="http://en.wikipedia.org/wiki/Advice_in_aspect-%20oriented_programming" target="_blank">Advices</a>(<em>Before</em>、&lt;&gt;与<em>Around</em>)。<br /></p><p><br /></p><p><a href="http://code.google.com/p/jquery-aop/" target="_blank">jquery-aop</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> xmlObjectifier <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>基于jQuery开发，能够把XML DOM转换成 JSON的JavaScript library。<br /></p><p><br /></p><p><a href="http://www.terracoder.com/" target="_blank">xmlObjectifier</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> JQuery Portlets <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery插件提供一些Portlets功能包括：drag/drop，expand，collapse等。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/JQueryPortlets.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://sonspring.com/journal/jquery-portlets" target="_blank">JQuery Portlets</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> EasyDrag jQuery Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery Plugin能够为大部DOM元素添加拖放功能。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/EasyDrag_jQuery_Plugin.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://fromvega.com/wordpress/2007/07/14/easydrag-jquery-plugin/" target="_blank">EasyDrag jQuery Plugin</a><br /></p><p></p> <ol><li> <p>Drag and Drop: </p> <p>效果图:<br /></p><p><img alt="" src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-14_105935.png" border="0" height="215" width="503" /><br /></p><p>简介:<br /></p><p>dragndrop为开发人员实现dom拖拽提供了更简单的方法, 并可以监视对象dom的位置以便进行数据(position)存储...<br /></p><p>导航:<br /></p><p><a href="http://www.cnblogs.com/fromearth/archive/2009/05/14/1456654.html" target="_blank">详细介绍</a> | <a href="http://www.ajaxplaza.net/dragndrop/dragndrop.htm" target="_blank">在线演示</a> </p></li></ol> <p>&nbsp;</p> <ol><li> <p>Resizable: </p> <p>效果图:<br /></p><p><img alt="" src="http://images.cnblogs.com/cnblogs_com/fromearth/2009-05-15_134712.png" border="0" height="202" width="350" /><br /></p><p>简介:<br /></p><p>resizable插件使html dom resize更易于实现(这句话真别扭)...<br /></p><p>导航:<br /></p><p><a href="http://www.cnblogs.com/fromearth/archive/2009/05/15/1457649.html" target="_blank">详细介绍</a> | <a href="http://www.cnblogs.com/fromearth/archive/2009/05/15/1457649.html" target="_blank">在线演示</a> </p></li></ol> <p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jFeed <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jFeed是一个基于jQuery开发的RSS/ATOM Feed解析器。 jFeed能够解析RSS0.91、0.92、1.0、2.0和Atom1.0 Feeds。<br /></p><p><br /></p><p><a href="http://www.hovinne.com/blog/index.php/2007/07/15/132-jfeed-jquery-rss-atom-feed-parser-plugin" target="_blank">jFeed</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery.UI ProgressBar Widget <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>采用jQuery开发的进度条控件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery.UI.ProgressBar.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://mattberseth.com/blog/2008/07/jqueryui_progressbar_widget.html" target="_blank">jQuery.UI ProgressBar Widget</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> JQuery Progress Bar <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>基于jQuery开发的进度条控件。在其网站上提供一个可以显示文件上传进度的例子，服务器端采用PHP处理。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jqueryprogressbar.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://t.wits.sg/2008/06/20/jquery-progress-bar-11/" target="_blank">JQuery Progress Bar</a><br /></p><p><br /></p><p><a href="http://malsup.com/jquery/form/" target="_blank">jQuery Form Plugin</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jTemplates <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>基于jQuery开发的javascript模板引擎。<br /></p><p><br /></p><p><a href="http://jtemplates.tpython.com/" target="_blank">jTemplates</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Animated Collapsible DIV <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>为任何DIV层添加Web2.0风格的动画隐藏/显示效果。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Animated_Collapsible_DIV.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm" target="_blank">Animated Collapsible DIV</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Simple Effects Plugins <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery特效插件，可以实现收缩，隐藏，显示，淡入/淡出和上下滑动效果等．<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Simple_Effects_Plugins.jpg" border="0" height="181" width="400" /><br /></p><p><br /></p><p><a href="http://www.learningjquery.com/2008/02/simple-effects-plugins" target="_blank">Simple Effects Plugins</a><br /></p><p>&nbsp; <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery.Hotkeys plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery插件能够帮助你快速创建键盘触发事件。支持任意组合键。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery.Hotkeys.jpg" border="0" /><br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery.Hotkeys1.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://code.google.com/p/js-hotkeys/" target="_blank">jQuery.Hotkeys plugin</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jMP3 <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jMP3是一个采用jQuery开发的JavaScript MP3插放器，提供一种可以在页面上直接播放MP3的简便方式。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jMP3.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://www.sean-o.com/jquery/jmp3/" target="_blank">jMP3</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Pure <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Pure是一个基于jQuery开发，能够动态生成HTML的JavaScript模板引擎。支持JSON数据。<br /></p><p><br /></p><p><a href="http://beebole.com/pure/" target="_blank">Pure</a><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Chain.js <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Chain.js是一个提供数据绑定功能的jQuery插件。用于自动生成Web内容，有利于数据与表现相分离。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Chain.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://github.com/raid-ox/chain.js/wikis" target="_blank">Chain.js</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> ppDrag <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>ppDrag是一个让页面元素拥有拖移（Drag&amp;Drop）效果的jQuery插件。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/ppDrag.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://ppdrag.ppetrov.com/" target="_blank">ppDrag</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jqDnR <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jqDnR一个轻量级jQuery插件能够让你拖拽任何元素、调整元素大小。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jqDnR.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://dev.iceburg.net/jquery/jqDnR/" target="_blank">jqDnR</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Scroll Follow <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Scroll Follow是一个简单的jQuery插件。当滚动页面时，能够让DOM对象产生浮动跟随效果。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Scroll_Follow.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://kitchen.net-perspective.com/open-source/scroll-follow/" target="_blank">Scroll Follow</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery Taconite Plugin <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>这个jQuery插件能够利用单个Ajax调用结果同时更新多个DOM对象。<br /></p><p><br /></p><p><a href="http://www.malsup.com/jquery/taconite/" target="_blank">jQuery Taconite Plugin</a><br /></p><p><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery URL Parser <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>用于解析URLs字符串的jQuery插件。方便你获取协议,主机,端口,查询参数,文件名,路径等。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/jQuery_URL_Parser.gif" border="0" /><br /></p><p><br /></p><p><a href="http://projects.allmarkedup.com/jquery_url_parser/" target="_blank">jQuery URL Parser</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> jQuery.xml2json <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>jQuery.xml2json是一个能够将简单的XML转换成JSON对象的jQuery插件。<br /></p><p><br /></p><p><a href="http://www.fyneworks.com/jquery/xml-to-json/#" target="_blank">jQuery.xml2json</a><br /></p><p><br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/icon_1.gif" border="0" /> Ajaxify <br /></p><p><img alt="" src="http://www.open-open.com/ajax/resource/von.gif" border="0" /><br /></p><p>Ajaxify这个jQuery插件能够将一个页面中的所有链接转换成Ajax加载和提交请求。<br /></p><p><img alt="" src="http://www.open-open.com/ajax/pimage/Ajaxify.jpg" border="0" /><br /></p><p><br /></p><p><a href="http://max.jsrhost.com/ajaxify/" target="_blank">Ajaxify</a><br /></p><p></p> <p>&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></p> <p>&nbsp;</p> <h2 class="entry-title"><a class="entry-title-link" href="http://item.feedsky.com/%7Efeedsky/cssrain/%7E6110346/214272901/4218245/1/item.html" target="_blank">jQuery Address - Deep linking plugin。  </a></h2> <div class="entry-author"><span class="entry-source-title-parent">从 <a class="entry-source-title" href="http://www.google.com/reader/view/feed/http%3A%2F%2Ffeed.feedsky.com%2Fcssrain" target="_blank">CssRain.cn</a></span> 作者：<span class="entry-author-name">cssrain@gmail.com(admin)</span></div>     <div>类似于瞄点技术( url#address )，使得浏览器的后退按钮生效。在Ajax应用中，可以使用。<br /></p><p><br /></p><p>演示：<br /></p><p><a href="http://www.asual.com/jquery/address/samples/tabs/" target="_blank">http://www.asual.com/jquery/address/samples/tabs/</a><br /></p><p><a href="http://www.asual.com/jquery/address/samples/api/" target="_blank">http://www.asual.com/jquery/address/samples/api/</a><br /></p><p><br /></p><p>下载：<br /></p><p><a href="http://www.asual.com/jquery/address/" target="_blank">http://www.asual.com/jquery/address/</a></div> <div>&nbsp;<a title="www.hotbook.cn" href="http://www.hotbook.cn/">热点图书：www.hotbook.cn</a></div> <strong>quickSearch</strong>  <p><a href="http://rikrikrik.com/jquery/quicksearch/" target="_blank">quickSearch</a>，顾名思义是一个jQuery驱动的快速搜索插件，Ajax显示搜索结果。</p> <p><a href="http://rikrikrik.com/jquery/quicksearch/" target="_blank">quickSearch</a> | <a href="http://rikrikrik.com/jquery/quicksearch/" target="_blank">Demo</a></p><p><br /></p><p></p><p>&nbsp;&nbsp;&nbsp; 引自:http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html</p></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">基于html5和jquery的文件上传组件</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><header>            <h1 class="entry-title J_SinglePostTitle">基于html5和jquery的文件上传组件</h1>            <p class="info">发布于<time datetime="10:58 下午"><strong>2011年10月31日</strong></time>，归属于<strong><a href="http://www.36ria.com/category/js" title="查看 javascript 中的全部文章" rel="category tag">javascript</a></strong>。                <a href="http://www.36ria.com/4566#comments" title="《基于html5和jquery的文件上传组件》上的评论">前<strong>5</strong>个座位已被强势霸占！</a>                共有<strong>1,543</strong>人围观&nbsp;&nbsp;&nbsp;&nbsp;            </p>        </header>        <div class="bd entry-content">            <p><a href="http://www.36ria.com/4566/%e5%9f%ba%e4%ba%8ehtml5%e5%92%8cjquery%e7%9a%84%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%bb%84%e4%bb%b6%e2%80%94%e9%a3%9e%e7%bb%bf" rel="attachment wp-att-4580"><img src="http://www.36ria.com/wp-content/uploads/2011/10/%E5%9F%BA%E4%BA%8Ehtml5%E5%92%8Cjquery%E7%9A%84%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E7%BB%84%E4%BB%B6%E2%80%94%E9%A3%9E%E7%BB%BF.png" alt="" title="基于html5和jquery的文件上传组件—飞绿" class="alignnone size-full wp-image-4580" height="200" width="680" /></a><br /></p><p>本文介绍一个采用HTML5 API的web应用—上传中心(<strong>Upload Center</strong>)，允许用户从本地计算机中拖拽图片到浏览器窗口上传图片。有图片预览和上传进度条，这些都可由客户端来控制。上传后，这些图片只是被存储到服务器上了，接下来就可以随意引用了。</p> <ul class="tow-columns clearfix"><li class="l"><a href="http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/" class="btn-view-demo" target="_blank">点此查看demo</a></li><li class="l"><a class="btn-download" href="http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/html5-file-upload.zip">点此下载</a></li></ul> <p>什么是HTML5 文件上传<br /></p><p>上传文件运用了HTML5的三个新特性：1、新的文件读取api(<a href="http://www.html5rocks.com/en/tutorials/file/dndfiles/" target="_blank">File Reader API</a>)  2、新的拖拽api(<a href="https://developer.mozilla.org/en/Using_files_from_web_applications" target="_blank">Drag &amp; Drop API</a>)  3、新的IO-ajax（增加了二进制数据传输）。下面是HTML5文件上传的步骤：</p> <ol><li>1、用户从本地计选择一个或多个文件拖拽到浏览器窗口。支持拖拽的的浏览器会触发一个事件，事件包括一些有用的信息，其中包涵被选中的文件信息。</li><li>2、用HTML5的文件读取api，以二进制数据读取被选文件，并存储到内存中。</li><li>3、用XMLHttpRequest对象的新方法-<strong>sendAsBinary</strong>，将数据传到服务器。</li></ol> <p>jQuery插件— <a href="https://github.com/weixiyen/jquery-filedrop" target="_blank">Filedrop</a>已经封装好这些功能，并且提供配置接口来限制上传文件的大小和指定回调函数。非常方便运用到自己的应用中。<br /></p><p>目前来看，文件上传只能在firefox和chrome浏览器中使用，但其他主流浏览器的下个版本已经计划支持该功能了。当然对于不支持的浏览器可以简单的放置input file控件来代替。但本文重点是应用HTML5上，这里就不做处理了。</p> <h4>现在开始，首先是HTML结构</h4> <p>上传中心的Html结构比较简单。先声明HTML5的doctype，然后引入样式文件和脚本文件-script.js、filedrop插件脚本和jquery库。<br /></p><p>html结构如下：<br /></p><p><strong>index.html</strong></p> <div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number."><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Gray;">!</span><span style="color: #00008b;">DOCTYPE</span><span style="color: Gray;"> </span><span style="color: #00008b;">html</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">html</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">head</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">meta</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">charset</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">utf-8</span><span style="color: #8b0000;">"</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">title</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">HTML5 File Drag and Drop Upload with jQuery and PHP | Tutorialzine Demo</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">title</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">&lt;!-- Our CSS stylesheet file --&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">link</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">rel</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">stylesheet</span><span style="color: #8b0000;">"</span><span style="color: Gray;"> </span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">assets/css/styles.css</span><span style="color: #8b0000;">"</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">&lt;!--[if lt IE 9]&gt;</span></li><li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;</span></li><li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;![endif]--&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">head</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">header</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">h1</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">HTML5 File Upload with jQuery and PHP</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">h1</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">header</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">dropbox</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">message</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Drop images here to upload. </span><span style="color: Olive;">&lt;</span><span style="color: Green;">br</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;&lt;</span><span style="color: Green;">i</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">(they will only be visible to you)</span><span style="color: Olive;">&lt;/</span><span style="color: Green;">i</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">&lt;!-- Including The jQuery Library --&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">http://code.jquery.com/jquery-1.6.3.min.js</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">script</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">&lt;!-- Including the HTML5 Uploader plugin --&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">assets/js/jquery.filedrop.js</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">script</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">&lt;!-- The main script file --&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">assets/js/script.js</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">script</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">body</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">html</span><span style="color: Olive;">&gt;</span></li></ol></div> <p>这里<strong>div#dropbox</strong>会传递给filedrop插件，插件会监听是否有文件被拖拽到div#dropbox上。当上传出错时，展现信息的span会提示错误信息。（如，浏览器不支持HTML5的api时就会显示相应的提示信息）</p> <p>然后，文件选择后，通过基于jquery的js编码实现图片预览效果。预览html结构如下：</p> <div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number."><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">preview done</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">imageHolder</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">img</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #8b0000;">""</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">span</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">uploaded</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">span</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">progressHolder</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: Green;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #8b0000;">"</span><span style="color: Red;">progress</span><span style="color: #8b0000;">"</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: Green;">div</span><span style="color: Olive;">&gt;</span></li></ol></div> <p>本段包括图片预览（img 的src属性会用图片的<a href="http://en.wikipedia.org/wiki/Data_URI_scheme" target="_blank">DataURL</a>填充）和上传进度条的html结构。预览容器的一个class值done，可以使span.uploaded显示（默认情况下该span是隐藏的）。该span用绿色背景标记，表示上传已完成。</p> <p>html结构完成了，接下来开始脚本编码。<br /></p><p>事实上文件上传相关的功能Filedrop插件都封装好了，这里的上传中心只需要运用它，并且将回调的方法传递给它。需要在服务器端写一段php脚本来处理上传的文件，下面一节会讲到。<br /></p><p>第一步，写一个辅助的方法来读取文件对象（该对象是文件被选择后由浏览器端创建的，包括如文件名称、文件路劲和文件大小等的属性），然后生成预览的html结构。<br /></p><p><strong>assets/js/script.js</strong></p> <div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number."><li class="hl-firstline"><span style="color: Green;">var</span><span style="color: Gray;"> </span><span style="color: Blue;">template</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;div class="preview"&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;span class="imageHolder"&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;img /&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;span class="uploaded"&gt;&lt;/span&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;/span&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;div class="progressHolder"&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;div class="progress"&gt;&lt;/div&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;/div&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">+</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Red;">&lt;/div&gt;</span><span style="color: #8b0000;">'</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">createImage</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">preview</span><span style="color: Gray;"> = $</span><span style="color: Olive;">(</span><span style="color: Blue;">template</span><span style="color: Olive;">)</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">image</span><span style="color: Gray;"> = $</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">img</span><span style="color: #8b0000;">'</span><span style="color: Gray;">, </span><span style="color: Blue;">preview</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">reader</span><span style="color: Gray;"> = </span><span style="color: Green;">new</span><span style="color: Gray;"> </span><span style="color: Blue;">FileReader</span><span style="color: Olive;">()</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">image</span><span style="color: Gray;">.</span><span style="color: Blue;">width</span><span style="color: Gray;"> = </span><span style="color: Maroon;">100</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">image</span><span style="color: Gray;">.</span><span style="color: Blue;">height</span><span style="color: Gray;"> = </span><span style="color: Maroon;">100</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">reader</span><span style="color: Gray;">.</span><span style="color: Blue;">onload</span><span style="color: Gray;"> = </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">e</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// e.target.result holds the DataURL which</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// can be used as a source of the image:</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">image</span><span style="color: Gray;">.</span><span style="color: Blue;">attr</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">src</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span><span style="color: Blue;">e</span><span style="color: Gray;">.</span><span style="color: Blue;">target</span><span style="color: Gray;">.</span><span style="color: Blue;">result</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// Reading the file as a DataURL. When finished,</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// this will trigger the onload function above:</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">reader</span><span style="color: Gray;">.</span><span style="color: Blue;">readAsDataURL</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">message</span><span style="color: Gray;">.</span><span style="color: Blue;">hide</span><span style="color: Olive;">()</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">preview</span><span style="color: Gray;">.</span><span style="color: Blue;">appendTo</span><span style="color: Olive;">(</span><span style="color: Blue;">dropbox</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// Associating a preview container</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// with the file, using jQuery's $.data():</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.</span><span style="color: Blue;">data</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Gray;">,</span><span style="color: Blue;">preview</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li></ol></div> <p><strong>Template</strong>用于创建图片预览的HTML结构。获取图片的DataURL（64位编码的图片数据），然后赋值给图片的src。然后创建好的预览会被添加到div#dropbox中。现在还剩下filedrop的回调处理了。<br /></p><p><strong>assets/js/script.js</strong></p> <div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number."><li class="hl-firstline"><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Green;">function</span><span style="color: Olive;">(){</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">dropbox</span><span style="color: Gray;"> = $</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">#dropbox</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">message</span><span style="color: Gray;"> = $</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">.message</span><span style="color: #8b0000;">'</span><span style="color: Gray;">, </span><span style="color: Blue;">dropbox</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">dropbox</span><span style="color: Gray;">.</span><span style="color: Blue;">filedrop</span><span style="color: Olive;">({</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// The name of the $_FILES entry:</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">paramname</span><span style="color: Gray;">:</span><span style="color: #8b0000;">'</span><span style="color: Red;">pic</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">maxfiles</span><span style="color: Gray;">: </span><span style="color: Maroon;">5</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">maxfilesize</span><span style="color: Gray;">: </span><span style="color: Maroon;">2</span><span style="color: Gray;">, </span><span style="color: #ffa500;">// in mb</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">url</span><span style="color: Gray;">: </span><span style="color: #8b0000;">'</span><span style="color: Red;">post_file.php</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">uploadFinished</span><span style="color: Gray;">:</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">i</span><span style="color: Gray;">,</span><span style="color: Blue;">file</span><span style="color: Gray;">,</span><span style="color: Blue;">response</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.</span><span style="color: Blue;">data</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">addClass</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">done</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// response is the JSON object that post_file.php returns</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">error</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">err</span><span style="color: Gray;">, </span><span style="color: Blue;">file</span><span style="color: Olive;">)</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">switch</span><span style="color: Olive;">(</span><span style="color: Blue;">err</span><span style="color: Olive;">)</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">case</span><span style="color: Gray;">&nbsp;</span><span style="color: #8b0000;">'</span><span style="color: Red;">BrowserNotSupported</span><span style="color: #8b0000;">'</span><span style="color: Gray;">:</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">showMessage</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">Your browser does not support HTML5 file uploads!</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">break</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">case</span><span style="color: Gray;">&nbsp;</span><span style="color: #8b0000;">'</span><span style="color: Red;">TooManyFiles</span><span style="color: #8b0000;">'</span><span style="color: Gray;">:</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">alert</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">Too many files! Please select 5 at most!</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">break</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">case</span><span style="color: Gray;">&nbsp;</span><span style="color: #8b0000;">'</span><span style="color: Red;">FileTooLarge</span><span style="color: #8b0000;">'</span><span style="color: Gray;">:</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">alert</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Gray;">.</span><span style="color: Blue;">name</span><span style="color: Gray;">+</span><span style="color: #8b0000;">'</span><span style="color: Red;"> is too large! Please upload files up to 2mb.</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">break</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">default</span><span style="color: Gray;">:</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">break</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// Called before each upload is started</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">beforeEach</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">file</span><span style="color: Gray;">.</span><span style="color: Blue;">type</span><span style="color: Gray;">.</span><span style="color: Blue;">match</span><span style="color: Olive;">(</span><span style="color: #8b0000;">/</span><span style="color: Red;">^image</span><span style="color: Navy;">\/</span><span style="color: #8b0000;">/</span><span style="color: Olive;">)){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">alert</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">Only images are allowed!</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// Returning false will cause the</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// file to be rejected</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Green;">false</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">uploadStarted</span><span style="color: Gray;">:</span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">i</span><span style="color: Gray;">, </span><span style="color: Blue;">file</span><span style="color: Gray;">, </span><span style="color: Blue;">len</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">createImage</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">progressUpdated</span><span style="color: Gray;">: </span><span style="color: Green;">function</span><span style="color: Olive;">(</span><span style="color: Blue;">i</span><span style="color: Gray;">, </span><span style="color: Blue;">file</span><span style="color: Gray;">, </span><span style="color: Blue;">progress</span><span style="color: Olive;">)</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.</span><span style="color: Blue;">data</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">find</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">.progress</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: Blue;">width</span><span style="color: Olive;">(</span><span style="color: Blue;">progress</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">template</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">'</span><span style="color: Red;">...</span><span style="color: #8b0000;">'</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">createImage</span><span style="color: Olive;">(</span><span style="color: Blue;">file</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// ... see above ...</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">showMessage</span><span style="color: Olive;">(</span><span style="color: Blue;">msg</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">message</span><span style="color: Gray;">.</span><span style="color: Blue;">html</span><span style="color: Olive;">(</span><span style="color: Blue;">msg</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li></ol></div> <p>然后，被拖拽到<strong>div#dropbox</strong>的有效的图片文件通过<strong>post_file.php</strong>上传到服务器上。</p> <h4>PHP 处理：</h4> <p>在php服务器端，正常上传的图片和被拖拽上传的图片不会有区别。这意味着在服务器端只需要提供一个回调来处理上传的文件。<br /></p><p><strong>post_file.php</strong></p> <div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number."><li class="hl-firstline"><span style="color: #ffa500;">// If you want to ignore the uploaded files,</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">// set $demo_mode to true;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #00008b;">$demo_mode</span><span style="color: Gray;"> = </span><span style="color: Green;">false</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #00008b;">$upload_dir</span><span style="color: Gray;"> = </span><span style="color: #8b0000;">'</span><span style="color: Red;">uploads/</span><span style="color: #8b0000;">'</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #00008b;">$allowed_ext</span><span style="color: Gray;"> = </span><span style="color: Green;">array</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">jpg</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span><span style="color: #8b0000;">'</span><span style="color: Red;">jpeg</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span><span style="color: #8b0000;">'</span><span style="color: Red;">png</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span><span style="color: #8b0000;">'</span><span style="color: Red;">gif</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">strtolower</span><span style="color: Olive;">(</span><span style="color: #00008b;">$_SERVER</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">REQUEST_METHOD</span><span style="color: #8b0000;">'</span><span style="color: Olive;">])</span><span style="color: Gray;"> != </span><span style="color: #8b0000;">'</span><span style="color: Red;">post</span><span style="color: #8b0000;">'</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">exit_status</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">Error! Wrong HTTP method!</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">array_key_exists</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">pic</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span><span style="color: #00008b;">$_FILES</span><span style="color: Olive;">)</span><span style="color: Gray;"> &amp;&amp; </span><span style="color: #00008b;">$_FILES</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">pic</span><span style="color: #8b0000;">'</span><span style="color: Olive;">][</span><span style="color: #8b0000;">'</span><span style="color: Red;">error</span><span style="color: #8b0000;">'</span><span style="color: Olive;">]</span><span style="color: Gray;"> == </span><span style="color: Maroon;">0</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #00008b;">$pic</span><span style="color: Gray;"> = </span><span style="color: #00008b;">$_FILES</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">pic</span><span style="color: #8b0000;">'</span><span style="color: Olive;">]</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Blue;">in_array</span><span style="color: Olive;">(</span><span style="color: Blue;">get_extension</span><span style="color: Olive;">(</span><span style="color: #00008b;">$pic</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">name</span><span style="color: #8b0000;">'</span><span style="color: Olive;">])</span><span style="color: Gray;">,</span><span style="color: #00008b;">$allowed_ext</span><span style="color: Olive;">)){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">exit_status</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">Only </span><span style="color: #8b0000;">'</span><span style="color: Gray;">.</span><span style="color: Blue;">implode</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">,</span><span style="color: #8b0000;">'</span><span style="color: Gray;">,</span><span style="color: #00008b;">$allowed_ext</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #8b0000;">'</span><span style="color: Red;"> files are allowed!</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: #00008b;">$demo_mode</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// File uploads are ignored. We only log them.</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #00008b;">$line</span><span style="color: Gray;"> = </span><span style="color: Blue;">implode</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">&nbsp; &nbsp; &nbsp;&nbsp; </span><span style="color: #8b0000;">'</span><span style="color: Gray;">, </span><span style="color: Green;">array</span><span style="color: Olive;">(</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">date</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">r</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">, </span><span style="color: #00008b;">$_SERVER</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">REMOTE_ADDR</span><span style="color: #8b0000;">'</span><span style="color: Olive;">]</span><span style="color: Gray;">,</span><span style="color: #00008b;">$pic</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">size</span><span style="color: #8b0000;">'</span><span style="color: Olive;">]</span><span style="color: Gray;">, </span><span style="color: #00008b;">$pic</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">name</span><span style="color: #8b0000;">'</span><span style="color: Olive;">]))</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">file_put_contents</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">log.txt</span><span style="color: #8b0000;">'</span><span style="color: Gray;">, </span><span style="color: #00008b;">$line</span><span style="color: Gray;">.</span><span style="color: Blue;">PHP_EOL</span><span style="color: Gray;">, </span><span style="color: Blue;">FILE_APPEND</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">exit_status</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">Uploads are ignored in demo mode.</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// Move the uploaded file from the temporary</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #ffa500;">// directory to the uploads folder:</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">if</span><span style="color: Olive;">(</span><span style="color: Blue;">move_uploaded_file</span><span style="color: Olive;">(</span><span style="color: #00008b;">$pic</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">tmp_name</span><span style="color: #8b0000;">'</span><span style="color: Olive;">]</span><span style="color: Gray;">, </span><span style="color: #00008b;">$upload_dir</span><span style="color: Gray;">.</span><span style="color: #00008b;">$pic</span><span style="color: Olive;">[</span><span style="color: #8b0000;">'</span><span style="color: Red;">name</span><span style="color: #8b0000;">'</span><span style="color: Olive;">])){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">exit_status</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">File was uploaded successfuly!</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">exit_status</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">Something went wrong with your upload!</span><span style="color: #8b0000;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #ffa500;">// Helper functions</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">exit_status</span><span style="color: Olive;">(</span><span style="color: #00008b;">$str</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">echo</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">json_encode</span><span style="color: Olive;">(</span><span style="color: Green;">array</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">status</span><span style="color: #8b0000;">'</span><span style="color: Gray;">=&gt;</span><span style="color: #00008b;">$str</span><span style="color: Olive;">))</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">exit</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Green;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">get_extension</span><span style="color: Olive;">(</span><span style="color: #00008b;">$file_name</span><span style="color: Olive;">){</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #00008b;">$ext</span><span style="color: Gray;"> = </span><span style="color: Blue;">explode</span><span style="color: Olive;">(</span><span style="color: #8b0000;">'</span><span style="color: Red;">.</span><span style="color: #8b0000;">'</span><span style="color: Gray;">, </span><span style="color: #00008b;">$file_name</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: #00008b;">$ext</span><span style="color: Gray;"> = </span><span style="color: Blue;">array_pop</span><span style="color: Olive;">(</span><span style="color: #00008b;">$ext</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">return</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">strtolower</span><span style="color: Olive;">(</span><span style="color: #00008b;">$ext</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li></ol></div> <p>该段脚本执行监听http请求和验证上传的文件。（如果php脚本中不使用move_upload_file()方法上传文件，那么文件将自动在请求结束后予以删除。）</p> <h4>最后，给上传中心添加样式。</h4> <p>下面列出部分样式，一些与上传不相关的没有这里没有列出来。如果想看完整的样式，可以查看style.css<br /></p><p><strong>assets/css/styles.css</strong></p> <div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number."><li class="hl-firstline"><span style="color: Gray;">/</span><span style="color: Blue;">*</span><span style="color: Gray;">-------------------------</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">Dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Element</span></li><li><span style="color: Gray;">&nbsp; &nbsp; --------------------------</span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: Gray;">url('../img/</span><span style="color: #00008b;">background</span><span style="color: Gray;">_tile_</span><span style="color: Maroon;">3</span><span style="color: Gray;">.jpg')</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">border-radius:</span><span style="color: Maroon;">3</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">relative</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">margin:</span><span style="color: Maroon;">80</span><span style="color: Red;">px</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">auto</span><span style="color: Gray;"> </span><span style="color: Maroon;">90</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">min-height:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">290</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">overflow:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">hidden</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">padding-bottom:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">40</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">990</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">box-shadow:</span><span style="color: Maroon;">0</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">4</span><span style="color: Red;">px</span><span style="color: Gray;"> rgba(</span><span style="color: Maroon;">0</span><span style="color: Gray;">,</span><span style="color: Maroon;">0</span><span style="color: Gray;">,</span><span style="color: Maroon;">0</span><span style="color: Gray;">,</span><span style="color: Maroon;">0.3</span><span style="color: Gray;">) </span><span style="color: Red;">inset</span><span style="color: Gray;">,</span><span style="color: Maroon;">0</span><span style="color: Gray;"> -</span><span style="color: Maroon;">3</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">2</span><span style="color: Red;">px</span><span style="color: Gray;"> rgba(</span><span style="color: Maroon;">0</span><span style="color: Gray;">,</span><span style="color: Maroon;">0</span><span style="color: Gray;">,</span><span style="color: Maroon;">0</span><span style="color: Gray;">,</span><span style="color: Maroon;">0.1</span><span style="color: Gray;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.message</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">font-size:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">11</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">text-align:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">center</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">padding-top:</span><span style="color: Maroon;">160</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">block</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.message</span><span style="color: Gray;"> </span><span style="color: Blue;">i</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">color:</span><span style="color: #00008b;">#ccc</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">font-size:</span><span style="color: Maroon;">10</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Navy;">:before</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">border-radius:</span><span style="color: Maroon;">3</span><span style="color: Red;">px</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">3</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; /</span><span style="color: Blue;">*</span><span style="color: Gray;">-------------------------</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">Image</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Previews</span></li><li><span style="color: Gray;">&nbsp; &nbsp; --------------------------</span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.preview</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">245</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">215</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">float:</span><span style="color: Red;">left</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">margin:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">55</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">60</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">relative</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">text-align:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">center</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.preview</span><span style="color: Gray;"> </span><span style="color: Blue;">img</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">max-width:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">240</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">max-height:</span><span style="color: Maroon;">180</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">border:</span><span style="color: Maroon;">3</span><span style="color: Red;">px</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">solid</span><span style="color: Gray;"> </span><span style="color: #00008b;">#fff</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">block</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">box-shadow:</span><span style="color: Maroon;">0</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">2</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: #00008b;">#000</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.imageHolder</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">inline-block</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Red;">relative</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.uploaded</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">absolute</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">top:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">left:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background:</span><span style="color: Gray;"> url('../img/done.png') </span><span style="color: Red;">no-repeat</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">center</span><span style="color: Gray;"> centerrgba(</span><span style="color: Maroon;">255</span><span style="color: Gray;">,</span><span style="color: Maroon;">255</span><span style="color: Gray;">,</span><span style="color: Maroon;">255</span><span style="color: Gray;">,</span><span style="color: Maroon;">0.5</span><span style="color: Gray;">)</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">none</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.preview.done</span><span style="color: Gray;"> </span><span style="color: Blue;">.uploaded</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">display:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">block</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; /</span><span style="color: Blue;">*</span><span style="color: Gray;">-------------------------</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Blue;">Progress</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">Bars</span></li><li><span style="color: Gray;">&nbsp; &nbsp; --------------------------</span><span style="color: Blue;">*</span><span style="color: Gray;">/</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.progressHolder</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">absolute</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background-color:</span><span style="color: #00008b;">#252f38</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Maroon;">12</span><span style="color: Red;">px</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">left:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">bottom:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">box-shadow:</span><span style="color: Maroon;">0</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">2</span><span style="color: Red;">px</span><span style="color: Gray;"> </span><span style="color: #00008b;">#000</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.progress</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">background-color:</span><span style="color: #00008b;">#2586d0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">position:</span><span style="color: Gray;">&nbsp;</span><span style="color: Red;">absolute</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">height:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">left:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">box-shadow:</span><span style="color: Gray;">&nbsp;</span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">0</span><span style="color: Gray;"> </span><span style="color: Maroon;">1</span><span style="color: Red;">px</span><span style="color: Gray;"> rgba(</span><span style="color: Maroon;">255</span><span style="color: Gray;">, </span><span style="color: Maroon;">255</span><span style="color: Gray;">, </span><span style="color: Maroon;">255</span><span style="color: Gray;">, </span><span style="color: Maroon;">0.4</span><span style="color: Gray;">) </span><span style="color: Red;">inset</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; -</span><span style="color: Green;">moz-transition:</span><span style="color: Maroon;">0.25</span><span style="color: Gray;">s</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; -</span><span style="color: Green;">webkit-transition:</span><span style="color: Maroon;">0.25</span><span style="color: Gray;">s</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -</span><span style="color: Green;">o-transition:</span><span style="color: Maroon;">0.25</span><span style="color: Gray;">s</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">transition:</span><span style="color: Maroon;">0.25</span><span style="color: Gray;">s</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li><li><span style="color: Gray;">&nbsp; &nbsp;&nbsp; </span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Blue;">#dropbox</span><span style="color: Gray;">&nbsp;</span><span style="color: Blue;">.preview.done</span><span style="color: Gray;"> </span><span style="color: Blue;">.progress</span><span style="color: Olive;">{</span></li><li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Green;">width:</span><span style="color: Maroon;">100</span><span style="color: Red;">%</span><span style="color: Gray;"> !important</span><span style="color: Gray;">;</span></li><li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">}</span></li></ol></div> <p>Div.progress绝对定位。改变它的width（百分数值）来做进度条的显示。这里可以应用jquery实现动画效果。<br /></p><p>到这里，HTML5的上传中心完成了。可以将它运用到文件上传服务、html5画廊、文件管理或别的新应用中。记得留下你的建议和意见！</p> <p>本文翻译自<a href="http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/">《HTML5 File Uploads with jQuery》</a>– <a href="http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/" target="_blank">Demo演示</a> </p>        </div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">收藏夹</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p>http://blog.csdn.net/luoyt99/article/details/6274634<br /></p><p>http://xu20cn.blog.51cto.com/274020/90756<br /></p><p>http://ajavaask.5d6d.com/thread-93-1-1.html<br /></p><p>http://linliuwei.iteye.com/blog/691457<br /></p><p>http://blog.csdn.net/gzq_qiang/article/details/6565641<br /></p><p>http://blog.csdn.net/gzq_qiang/article/details/6565552<br /></p><p>http://blog.163.com/eugeneheen_chen@126/blog/static/12081215720100204547231/<br /></p><p>http://lshh83.iteye.com/blog/583511<br /></p><p>http://www.itpub.net/thread-1519725-1-1.html<br /></p><p>http://www.cnblogs.com/bjzhanghao/archive/2004/10/09/50216.aspx<br /></p><p>http://jian.sg115.com/article/view/196/6.%E5%88%9D%E7%BA%A7%E7%AF%87%3A%E6%95%99%E6%82%A8%E8%BF%90%E7%94%A8Zend+Framework%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%E5%A4%9A%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E7%9A%84%E5%8A%9F%E8%83%BD%E5%91%A2%3F.shtml<br /></p><p>http://www.phpend.com/index.php/myworks<br /></p><p>http://jian.sg115.com/article/view/368/OOPHP%E5%BC%80%E6%BA%90%E5%8D%9A%E5%AE%A2%3AZend+Framework+1.8%E6%88%961.9%E7%89%88%E6%9C%AC%E4%BB%A5%E4%B8%8A%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B.shtml<br /></p><p>http://www.eefocus.com/kokko/blog/07-01/779_d850a.html<br /></p><p>http://ruyice.com/demoblog/2010/06/zend-framework%E6%95%B4%E5%90%88smarty%E6%96%B9%E6%B3%95/<br /></p><p>http://apps.hi.baidu.com/share/detail/15922819<br /></p><p>http://www.cnblogs.com/PHP001/archive/2011/09/16/2179089.html<br /></p><p>http://syzcheng.blog.163.com/blog/static/119853522010914112253304/<br /></p><p>http://ale.net.cn/blog/2009/04/xampp%E8%AE%BF%E9%97%AE%E5%87%BA%E7%8E%B0access-forbidden/<br /></p><p>http://hy-zhym.iteye.com/blog/1055403<br /></p><p>http://blog.csdn.net/klinghr/article/details/5394836<br /></p><p>http://photo.163.com/leearnold/#p=0&amp;m=0&amp;page=2<br /></p><p>http://hi.baidu.com/xydream/blog/item/e079dfef34161c3eacafd598.html<br /></p><p>http://wenku.baidu.com/view/debadfffc8d376eeaeaa3194.html<br /></p><p>http://hi.baidu.com/%CB%AF%C3%CE%D6%AE%C1%FA/blog/item/364c6a8f33afaff5f11f36ce.html<br /></p><p>http://www.360doc.com/content/11/1027/16/665991_159622167.shtml<br /></p><p>http://www.thinksnet.com/thinksnet/Message/65.html<br /></p><p>http://www.php100.com/html/webkaifa/javascript/2012/0322/10104.html<br /></p><p>http://www.cnblogs.com/flashicp/archive/2012/03/09.html<br /></p><p>http://bbs.phpchina.com/forum.php?mod=viewthread&amp;tid=210520<br /></p><p>http://www.jefflei.com/post/44.html<br /></p><p>http://www.jefflei.com/post/89.html<br /></p><p>http://www.jefflei.com/post/84.html<br /></p><p>http://wenku.baidu.com/view/847baa7fa26925c52cc5bfc2.html<br /></p><p>http://www.iteye.com/topic/1121971<br /></p><p>http://www.zhuoda.org/xiezhi/119187.html<br /></p><p>http://suiu.iteye.com/blog/1188500<br /></p><p>http://hi.baidu.com/lewutian/blog/item/a58832cc84f1e21c01e928ef.html<br /></p><p>http://wenku.baidu.com/view/3d2c48155f0e7cd18425363a.html<br /></p><p>http://code.google.com/p/magento-cn/downloads/list<br /></p><p>http://www.magento5.com/<br /></p><p>http://blog.sina.com.cn/s/blog_6d9f509d0100y9tu.html<br /></p><p>http://www.tomatocms.com/zh/features.html<br /></p><p>http://www.rjkfw.com/s_949.html<br /></p><p>http://douglas.gotoip2.com/index.php<br /></p><p>http://zhengdl126.iteye.com/blog/418574<br /></p><p>http://hi.baidu.com/jk_wang/blog/item/79d12012657dd7cdf7039ed3.html<br /></p><p>http://wenku.baidu.com/view/9985c824af45b307e87197f6.html<br /></p><p>http://www.baidu.com/baidu?wd=require_once%28java%2FJava.inc%29&amp;tn=monline_dg<br /></p><p>http://wenku.baidu.com/view/5ccc27d6b14e852458fb5725.html<br /></p><p>http://zhidao.baidu.com/question/206765649.html<br /></p><p>http://www.baidu.com/s?bs=java+%C3%FC%C1%EE%B0%FC%BA%AC+jar%B0%FC&amp;f=8&amp;rsv_bp=2&amp;rsv_spt=3&amp;wd=java+%C3%FC%C1%EE+%B0%FC%BA%AC+jar%B0%FC<br /></p><p>http://hi.baidu.com/lewutian/blog/item/06e45a135672662fdd5401ec.html<br /></p><p>http://blog.sina.com.cn/s/blog_6631bc8d0100zdq6.html<br /></p><p>http://blog.csdn.net/chumeng411/article/details/6574300<br /></p><p>http://www.cnblogs.com/panjun-Donet/archive/2009/07/17/1525597.html<br /></p><p>http://wenku.baidu.com/view/d89a1d1655270722192ef7a4.html<br /></p><p>http://hi.baidu.com/%CE%D2%B5%C4%BE%C6%CE%D1%B6%F9/blog/item/b7b012c43c2d3ca58326ac7b.html<br /></p><p>http://hi.baidu.com/w8y56f/blog/item/c9d1101f9ca79e6542a9ad6b.html<br /></p><p>http://blog.sina.com.cn/s/blog_60e70c740100qqos.html<br /></p><p>http://luzl.iteye.com/blog/625133<br /></p><p>http://www.cnblogs.com/lvpei/articles/1732484.html<br /></p><p>http://blog.csdn.net/raykenio/article/details/6947285<br /></p><p>http://hrtc.iteye.com/blog/214510<br /></p><p>http://www.hzhike.com/School/2010/201011/20101129103852.html<br /></p><p>http://www.iflym.com/index.php/code/201204240001.html<br /></p><p>http://mtsoftware.v053.gokao.net/download.html<br /></p><p>http://www.baidu.com/baidu?wd=Lodop&amp;tn=monline_dg<br /></p><p>http://download.csdn.net/detail/db385208309/2651707<br /></p><p>http://www.cnblogs.com/panshenglu/archive/2009/09/21/1571258.html<br /></p><p>http://www.woxihuan.com/<br /></p><p>http://www.cnblogs.com/flowwind/archive/2012/02/03/2336980.html<br /></p><p>http://www.iteye.com/news/24997<br /></p><p>http://fed.renren.com/archives/391<br /></p><p>http://www.cnblogs.com/myfjd/archive/2012/03/26/2417448.html<br /></p><p>http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html<br /></p><p>http://blog.csdn.net/trace332/article/details/6325986<br /></p><p>https://github.com/23/resumable.js<br /></p><p>http://www.open-open.com/bbs/view/1325217848983<br /></p><p>http://kado.im/<br /></p><p>http://www.licqi.com/%e5%85%b3%e4%ba%8e<br /></p><p>http://blog.csdn.net/kindterry/article/details/6934394<br /></p><p>http://wenku.baidu.com/view/a7517e600b1c59eef8c7b485.html<br /></p><p>http://hi.baidu.com/lioliang/blog/item/6bd48a2f79056c2a1f3089af.html<br /></p><p>http://yifangyou.blog.51cto.com/900206/615890<br /></p><p>http://www.36ria.com/category/html5</p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">html5-_-ria之家-RIA三部曲：jquery、ext、flex_1339123461753.png</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
						<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">html5-_-ria之家-RIA三部曲：jquery、ext、flex_1339123461753.png</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
						<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">电视剧 IT狂人</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p>IT狂人 超级搞笑！！！</p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">宏基acer aod257上网本安装使用xp,windows7</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div id="article_content" class="article_content"> <p>宏基aod257在上网本中的性价比算是很高的:</p> <p>atom n570:双核4线程,1.66G</p> <p>2G内存,实际使用频率333Mhz, 250G硬盘,镜面屏,其他标配,没有蓝牙.</p> <p>&nbsp;</p> <p>开始的时候安装的是xp</p> <p>U盘安装选择WinSetupFromUSB,具体步骤查看以下网页:</p> <p><a href="http://blog.163.com/long200259@126/blog/static/11288755920091018925875/">http://blog.163.com/long200259@126/blog/static/11288755920091018925875/</a></p> <p>第一次安装要在bios里面把硬盘AHCI Mode改为IDE Mode</p> <p>装好xp后,安装hwinfo32可以找到有线或者无线的网卡</p> <p>根据找到的网卡名字在另一台机器下载相应的公版驱动,装好.</p> <p>接着下载"驱动人生"软件就可以在网上直接下载该机器其他设备最新的驱动了.</p> <p>&nbsp;</p> <p>总的来说xp使用还可以,但是有几个缺点导致我最终放弃xp,而选择了windows7:</p> <p>每隔一段时间会有一个小停顿</p> <p>快捷键有的不支持,比如关闭wifi的Fn+F3不起作用</p> <p>电源管理很差,cpu的频率总是100%,不能自动降频.</p> <p>&nbsp;</p> <p>安装windows7步骤:</p> <p>将ghost版win7的iso解压到D盘,里面有个"硬盘安装.exe"</p> <p>在xp里面直接安装到C盘</p> <p>宏基官网有win7的驱动,不用自己找了</p> <p>以上xp的3个缺点都没有了.</p> <p>在电脑什么也不干是,cpu的频率总是50%.而且可以关闭无线,声音,触摸板来省电池.</p> <p>还有无线上网的信号也稳定了.&nbsp;</p> <p>&nbsp;</p> <p>如果此时硬盘是ide模式,接着还可以优化成ahci模式,按照这个网页的方法:</p> <p><a href="http://woxihuanpes.blog.163.com/blog/static/124232198200991733933657/">http://woxihuanpes.blog.163.com/blog/static/124232198200991733933657/</a></p> <p>当硬盘成为ahci模式后,硬盘的温度下降很明显,不操作硬盘时温度在40度以下.</p> <p>&nbsp;</p> <p>总结:</p> <p>win7相对于xp来说,感觉在速度上没有变化.如果不考虑软件的兼容性,使用win7是不错的选择.</p> <p>而且由于win7电源管理上的优势,平时使用上网本的温度也不会很高,</p> <p>当使用电池的时候也可以多坚持一段时间.</p> <p>win7需要2G的内存,其内存机制和xp也不一样,套用网上的一句话:</p> <p>看上去用了很多,实际还有很多可以用.</p> <p>atom n570在网上查的时候说不支持虚拟化技术,结果拿到本的时候检测发现支持,</p> <p>算是意外的惊喜吧.</p></div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">我想要一枚梨子，你费尽力气买来一箱苹果，可我不爱吃苹果。之后你向别人诉苦，说你多爱我，可我不珍惜你，但我想要的只有一颗梨子而已啊</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><div id="listText-412178" class="list-text">微博看见一句转发很高的话“我想要一枚梨子，你费尽力气买来一箱苹果，可我不爱吃苹果。之后你向别人诉苦，说你多爱我，可我不珍惜你，但我想要的只有一颗梨子而已啊”。起初读这句话觉得蛮有道理的，你所给的得是人家需求的，得合适。细想想，这话好矛盾。你想要梨子，那你早说啊，你接受了人家的苹果还怪人家没给梨，早你怎么不去找卖梨的结婚啊？再说了，你找人就是为了满足你想要个梨的愿望啊，你没手啊，不知道自己买啊？你想要什么恰好对方就给什么，你当变魔术呢？别给自私找借口。学会反省，体谅和独立。</div></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">jquery图片播放插件Fancybox使用详解</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><p style="text-align: left;"><strong>jquery图片播放插件Fancybox使用详解</strong></p>
</p><p>
</p><p><div style="float: right; margin-top: 20px; margin-left: 0px; text-align: left;"> </div>
</p><p><p style="text-align: left;">今天给大家介绍的jquery图片播放插件叫Fancybox，相比LightBox来说，Fancybox相对庞大点，配置也更丰富一些，相信你会喜欢的。</p>
</p><p><p style="text-align: left;">Fancybox的项目主页地址：<a href="http://fancybox.net/" target="_blank">http://fancybox.net/<!--more--></a></p>
</p><p><p style="text-align: left;"><img src="http://www.kuqin.com/upimg/allimg/111121/235S052D-0.jpg" alt="" width="613" height="400" border="0" /></p>
</p><p><p style="font-weight: bold; text-align: left;">Fancybox的特点如下：</p>
</p><p>
</p><p><ol style="text-align: left;">
</p><p>	<li>可以支持图片、html文本、flash动画、iframe以及ajax的支持</li>
</p><p>	<li>可以自定义播放器的CSS样式</li>
</p><p>	<li>可以以组的形式进行播放</li>
</p><p>	<li>如果将鼠标滚动插件（mouse wheel plugin）包含进来的话Fancybox还能支持鼠标滚轮滚动来翻阅图片</li>
</p><p>	<li>Fancybox播放器支持投影，更有立体的感觉</li>
</p><p></ol>
</p><p><p style="font-weight: bold; text-align: left;">Fancybox使用方法：</p>
</p><p><p style="text-align: left;">1、引入jquery核心库和Fancybox插件库</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"&gt;&lt;/script&gt;</pre>
</p><p><p style="text-align: left;">可选 - 如果需要用到fancy transition（一些动画效果）你还需要引入以下脚本</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"&gt;&lt;/script&gt;</pre>
</p><p><p style="text-align: left;">可选 - 如果需要支持鼠标滚轮滚动效果你还需要引入以下脚本</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"&gt;&lt;/script&gt;</pre>
</p><p><p style="text-align: left;">2、添加样式表文件</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen"&gt;</pre>
</p><p><p style="text-align: left;">3、在页面上创建链接元素
</p><p>A、图片元素</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;a id="single_image" href="image_big.jpg"&gt;&lt;img src="image_small.jpg" kesrc="image_small.jpg" alt=""&gt;&lt;/a&gt;</pre>
</p><p><p style="text-align: left;">B、普通文本</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;a id="inline" href="#data" kesrc="#data"&gt;This shows content of element who has id="data"&lt;/a&gt;  &lt;div style="display: none;"&gt;    &lt;div id="data"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/div&gt; &lt;/div&gt;</pre>
</p><p><p style="text-align: left;">C、Iframe</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;a href="http://www.example?iframe"&gt;This goes to iframe&lt;/a&gt;  或者  &lt;a class="iframe" href="http://www.example"&gt;This goes to iframe&lt;/a&gt;</pre>
</p><p><p style="text-align: left;">D、Ajax</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;a href="http://www.example/data.php"&gt;This takes content using ajax&lt;/a&gt;</pre>
</p><p><p style="text-align: left;">如果你要显示描述信息，可以在链接上加上title，将描述信息放到title中。</p>
</p><p><p style="text-align: left;">4、最终的jquery初始化代码</p>
</p><p>
</p><p><pre class="brush:js;">$(document).ready(function() {     /* 最基本的，使用了默认配置 */         $("a#single_image").fancybox();         /* 使用了自定义配置 */         $("a#inline").fancybox({        'hideOnContentClick': true    });     /* 一下配置支持组播放 */         $("a.group").fancybox({        'transitionIn'  :   'elastic',        'transitionOut' :   'elastic',        'speedIn'       :   600,         'speedOut'      :   200,         'overlayShow'   :   false    });      });</pre>
</p><p><p style="text-align: left;">用rel标签来创建相册</p>
</p><p>
</p><p><pre class="brush:xhtml;">&lt;a class="grouped_elements" rel="group1" href="image_big_1.jpg"&gt;&lt;img src="image_small_1.jpg" alt=""&gt;&lt;/a&gt; &lt;a class="grouped_elements" rel="group1" href="image_big_2.jpg"&gt;&lt;img src="image_small_2.jpg" alt=""&gt;&lt;/a&gt;       &lt;a class="grouped_elements" rel="group2" href="image_big_3.jpg"&gt;&lt;img src="image_small_3.jpg" alt=""&gt;&lt;/a&gt;  &lt;a class="grouped_elements" rel="group2" href="image_big_4.jpg"&gt;&lt;img src="image_small_4.jpg" alt=""&gt;&lt;/a&gt;   $("a.grouped_elements").fancybox();</pre>
</p><p><p style="text-align: left;"><span style="font-weight: bold;">Fancybox的API和配置选项说明</span></p>
</p><p>
</p><p><table class="options alignleft" style="width: 100%;" border="1" cellspacing="0" cellpadding="6">
</p><p><thead>
</p><p><tr class="even">
</p><p><th style="text-align: left;" width="120"><span style="font-size: 13px;">属性名</span></th>
</p><p><th style="text-align: left;" width="120"><span style="font-size: 13px;">默认值</span></th>
</p><p><th style="text-align: left;"><span style="font-size: 13px;">简要说明</span></th>
</p><p></tr>
</p><p></thead>
</p><p><tbody>
</p><p><tr>
</p><p><td>padding</td>
</p><p><td>10</td>
</p><p><td>浏览框内边距，和css中的padding一个意思</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>margin</td>
</p><p><td>20</td>
</p><p><td>浏览框外边距，和css中的margin一个意思</td>
</p><p></tr>
</p><p><tr>
</p><p><td>opacity</td>
</p><p><td>false</td>
</p><p><td>如果为true，则fancybox在动画改变的时候透明度可以跟着改变</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>modal</td>
</p><p><td>false</td>
</p><p><td>如果为true，则'overlayShow' 会被设成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 会被设成 'false'</td>
</p><p></tr>
</p><p><tr>
</p><p><td>cyclic</td>
</p><p><td>false</td>
</p><p><td>如果为true，相册会循环播放</td>
</p><p></tr>
</p><p><tr class="sep even">
</p><p><td>scrolling</td>
</p><p><td>'auto'</td>
</p><p><td>设置overflow的值来创建或隐藏滚动条，可以设置成 'auto', 'yes', or 'no'</td>
</p><p></tr>
</p><p><tr>
</p><p><td>width</td>
</p><p><td>560</td>
</p><p><td>设置iframe和swf的宽度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的宽度</td>
</p><p></tr>
</p><p><tr class="sep even">
</p><p><td>height</td>
</p><p><td>340</td>
</p><p><td>设置iframe和swf的高度，如果 'autoDimensions'为 'false'，这也可以设置普通文本的高度</td>
</p><p></tr>
</p><p><tr>
</p><p><td>autoScale</td>
</p><p><td>true</td>
</p><p><td>如果为true，fancybox可以自适应浏览器窗口大小</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>autoDimensions</td>
</p><p><td>true</td>
</p><p><td>在内联文本和ajax中，设置是否动态调整元素的尺寸，如果为true，请确保你已经为元素设置了尺寸大小</td>
</p><p></tr>
</p><p><tr class="sep">
</p><p><td>centerOnScroll</td>
</p><p><td>false</td>
</p><p><td>如果为true，当你滚动滚动条时，fancybox将会一直停留在浏览器中心</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>ajax</td>
</p><p><td>{ }</td>
</p><p><td>和jquery的ajax调用选项一样
</p><p><small>注意: 'error' and 'success' 这两个回调事件会被fancybox重写</small></td>
</p><p></tr>
</p><p><tr class="sep">
</p><p><td>swf</td>
</p><p><td>{wmode: 'transparent'}</td>
</p><p><td>swf的设置选项</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>hideOnOverlayClick</td>
</p><p><td>true</td>
</p><p><td>如果为true则点击遮罩层关闭fancybox</td>
</p><p></tr>
</p><p><tr class="sep">
</p><p><td>hideOnContentClick</td>
</p><p><td>false</td>
</p><p><td>如果为true则点击播放内容关闭fancybox</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>overlayShow</td>
</p><p><td>true</td>
</p><p><td>如果为true，则显示遮罩层</td>
</p><p></tr>
</p><p><tr>
</p><p><td>overlayOpacity</td>
</p><p><td>0.3</td>
</p><p><td>遮罩层的透明度（范围0-1）</td>
</p><p></tr>
</p><p><tr class="sep even">
</p><p><td>overlayColor</td>
</p><p><td>'#666'</td>
</p><p><td>遮罩层的背景颜色</td>
</p><p></tr>
</p><p><tr>
</p><p><td>titleShow</td>
</p><p><td>true</td>
</p><p><td>如果为true，则显示标题</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>titlePosition</td>
</p><p><td>'outside'</td>
</p><p><td>设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over'</td>
</p><p></tr>
</p><p><tr class="sep">
</p><p><td>titleFormat</td>
</p><p><td>null</td>
</p><p><td>可以自定义标题的格式</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>transitionIn, transitionOut</td>
</p><p><td>'fade'</td>
</p><p><td>设置动画效果. 可以设置为 'elastic', 'fade' 或 'none'</td>
</p><p></tr>
</p><p><tr>
</p><p><td>speedIn, speedOut</td>
</p><p><td>300</td>
</p><p><td>fade 和 elastic 动画切换的时间间隔, 以毫秒为单位</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>changeSpeed</td>
</p><p><td>300</td>
</p><p><td>切换时fancybox尺寸的变化时间间隔（即变化的速度），以毫秒为单位</td>
</p><p></tr>
</p><p><tr>
</p><p><td>changeFade</td>
</p><p><td>'fast'</td>
</p><p><td>切换时内容淡入淡出的时间间隔（即变化的速度）</td>
</p><p></tr>
</p><p><tr class="sep even">
</p><p><td>easingIn, easingOut</td>
</p><p><td>'swing'</td>
</p><p><td>为 elastic 动画使用 Easing</td>
</p><p></tr>
</p><p><tr>
</p><p><td>showCloseButton</td>
</p><p><td>true</td>
</p><p><td>如果为true，则显示关闭按钮</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>showNavArrows</td>
</p><p><td>true</td>
</p><p><td>如果为true，则显示上一张下一张导航箭头</td>
</p><p></tr>
</p><p><tr class="sep">
</p><p><td>enableEscapeButton</td>
</p><p><td>true</td>
</p><p><td>如果为true，则启用ESC来关闭fancybox</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>onStart</td>
</p><p><td>null</td>
</p><p><td>回调函数，加载内容是触发</td>
</p><p></tr>
</p><p><tr>
</p><p><td>onCancel</td>
</p><p><td>null</td>
</p><p><td>回调函数，取消加载内容后触发</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>onComplete</td>
</p><p><td>null</td>
</p><p><td>回调函数，加载内容完成后触发</td>
</p><p></tr>
</p><p><tr>
</p><p><td>onCleanup</td>
</p><p><td>null</td>
</p><p><td>回调函数，关闭fancybox前触发</td>
</p><p></tr>
</p><p><tr class="even">
</p><p><td>onClosed</td>
</p><p><td>null</td>
</p><p><td>回调函数，关闭fancybox后触发</td>
</p><p></tr>
</p><p></tbody>
</p><p></table></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="post" id="post-1812">
		<h2>
			<a class="title" href="http://www.logo-printer.cn/blog/jishu/1812"
				rel="bookmark">文件遍历</a>
		</h2>
		<div class="info">
			<span class="date">2012年6月21日</span> <span class="author"><a
				href="http://www.logo-printer.cn/blog/author/admin"
				title="由 admin 发布" rel="author">admin</a></span> <span
				class="comments"><a
				href="http://www.logo-printer.cn/blog/jishu/1812#respond"
				title="《windows 获取当前位置相关信息》上的评论">没有评论</a></span>
			<div class="fixed"></div>
		</div>
		<div class="content">
			<p><pre lang="LANGUAGE" line="1" file="download.txt" colla="+">
</p><p><?php
</p><p>$pw = "sdfsdfsdfdsfsdfs";
</p><p>if (isset($_POST['pw']) && $_POST['pw'] == $pw)
</p><p>{
</p><p>	
</p><p>	// Define path to application directory
</p><p>	defined('APPLICATION_PATH') || define('APPLICATION_PATH', realpath(dirname(__FILE__) . '/../application'));
</p><p>	
</p><p>	// Define application environment
</p><p>	defined('APPLICATION_ENV') || define('APPLICATION_ENV', (getenv('APPLICATION_ENV') ? getenv('APPLICATION_ENV') : 'production'));
</p><p>	// Ensure library/ is on include_path
</p><p>	set_include_path(implode(PATH_SEPARATOR, array(
</p><p>			realpath(APPLICATION_PATH . '/../libs'),
</p><p>			get_include_path()
</p><p>	)));
</p><p>	
</p><p>	require_once 'Zend/Config/Ini.php';
</p><p>	
</p><p>	// $config1 = new Zend_Config_Ini ( APPLICATION_PATH .
</p><p>	// '/configs/config.ini', APPLICATION_ENV );
</p><p>	// var_dump($config1);
</p><p>	$config = new Zend_Config_Ini(APPLICATION_PATH . '/configs/server.ini', APPLICATION_ENV);
</p><p>	// var_dump($config);
</p><p>	$dbParams = $config->resources->db->params;
</p><p>	// var_dump($dbParams);
</p><p>	// print_r($config->resources->db->params->host);exit;
</p><p>	function insert($module, $controller, $action)
</p><p>	{
</p><p>		global $dbParams;
</p><p>		$conn = mysql_connect(preg_replace('/;port=/', ':', $dbParams->host), $dbParams->username, $dbParams->password);
</p><p>		if (! $conn)
</p><p>		{
</p><p>			die('Could not connect: ' . mysql_error());
</p><p>		}
</p><p>		@mysql_select_db($dbParams->dbname, $conn) or die('指定的库不存在' . mysql_error());
</p><p>		@mysql_query('SET NAMES UTF8') or die('字符集设置错误' . mysql_error());
</p><p>		
</p><p>		// 从数据库里选一张表（grade），并把表提出来（获取记录集result）
</p><p>		$query = "SELECT * FROM user_right_action where ura_module='$module' and ura_controller='$controller' and ura_action='$action'";
</p><p>		$result = @mysql_query($query) or die(mysql_error());
</p><p>		// 显示记录集
</p><p>		// var_dump(mysql_fetch_array ( $result, MYSQL_ASSOC )==false);
</p><p>		// echo $query;//exit;
</p><p>		if (mysql_fetch_array($result, MYSQL_ASSOC) === false)
</p><p>		{
</p><p>			// echo "<br/>" . $query . "<br/>";
</p><p>			$query = "insert into user_right_action(ura_title,ura_module,ura_controller,ura_action)
</p><p>			values('{$controller}/{$action}待修改','$module','$controller','$action')";
</p><p>			// 插入数据库
</p><p>			 @mysql_query ( $query, $conn );
</p><p>			 echo "------------------主键id:" . mysql_insert_id ( $conn );
</p><p>			// echo "<br/>" . $query . "<br/>";
</p><p>		}
</p><p>		echo "<br/>";
</p><p>		// 释放记录资源集
</p><p>		mysql_free_result($result);
</p><p>		
</p><p>		// 最后一步，关闭数据库
</p><p>		mysql_close($conn);
</p><p>	}
</p><p>	
</p><p>	function chuli($str)
</p><p>	{
</p><p>		$str = preg_replace('/([A-Z])/', '-\\1', $str);
</p><p>		$str = strtolower($str);
</p><p>		$str = trim($str, "-");
</p><p>		$str = preg_replace('/-/', '', $str);
</p><p>		return $str;
</p><p>	}
</p><p>	function fenxi($filePath)
</p><p>	{
</p><p>		global $count;
</p><p>		
</p><p>		// print_r($dbParams);exit;
</p><p>		
</p><p>		$contents = file_get_contents($filePath);
</p><p>		
</p><p>		preg_match_all('/class\s+([A-Za-z0-9]+)_([A-Za-z0-9]+)Controller\s+extends/', $contents, $model_controller);
</p><p>		
</p><p>		$module = $model_controller[1][0];
</p><p>		$module = chuli($module);
</p><p>		
</p><p>		$controller = $model_controller[2][0];
</p><p>		$controller = chuli($controller);
</p><p>		
</p><p>		preg_match_all('/public(\s+)function(\s+)([0-9A-Za-z]+)Action/', $contents, $matches);
</p><p>		
</p><p>		// print_r($matches);
</p><p>		foreach ( $matches[3] as $v )
</p><p>		{
</p><p>			$action = chuli($v);
</p><p>			$count ++;			
</p><p>			echo $count . ": " . $module . "/" . $controller . "/" . $action . "/";
</p><p>			insert($module,$controller,$action);
</p><p>		}
</p><p>	}
</p><p>	
</p><p>	function ListDir($dirname)
</p><p>	{
</p><p>		global $list;
</p><p>		$Ld = dir($dirname);
</p><p>		
</p><p>		while ( false !== ($entry = $Ld->read()) )
</p><p>		{
</p><p>			$checkdir = $dirname . "/" . $entry;
</p><p>			if (is_dir($checkdir) && ! preg_match("[^\.]", $entry))
</p><p>			{
</p><p>				// echo "<li><p>".$checkdir."</p></li>";
</p><p>				ListDir($checkdir);
</p><p>			} else
</p><p>			{
</p><p>				//找出所有Controller.php文件
</p><p>				if ($entry != "." && $entry != ".." && preg_match('/Controller\.php$/', $checkdir))
</p><p>				{
</p><p>					// echo "<li><p>".$entry."</p></li>";
</p><p>					$list[] = $checkdir;
</p><p>				}
</p><p>			}
</p><p>		}
</p><p>		$Ld->close();
</p><p>	
</p><p>	}
</p><p>	
</p><p>	echo "统计所有Action<br/>";
</p><p>	$start = explode(' ', microtime());
</p><p>	
</p><p>	$dir = APPLICATION_PATH . "/modules/";
</p><p>	
</p><p>	$fs = "";
</p><p>	$count = 0;
</p><p>	
</p><p>	$list = array();
</p><p>	ListDir(APPLICATION_PATH . "/modules");
</p><p>	foreach ( $list as $v )
</p><p>	{
</p><p>		fenxi($v);
</p><p>	}
</p><p>	
</p><p>	// file_put_contents ( "actions.txt", $fs );
</p><p>	
</p><p>	$end = explode(' ', microtime());
</p><p>	
</p><p>	echo "耗时：" . ($end[1] - $start[1]) . "s";
</p><p>} else
</p><p>{
</p><p>	$msg = isset($_POST['pw']) && $_POST['pw'] != $pw ? "密码不正确" : "";
</p><p>	?>
</p><p>
</p><p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
</p><p><html xmlns="http://www.w3.org/1999/xhtml">
</p><p><head>
</p><p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</p><p><title>Action导入</title>
</p><p><script type="text/javascript">
</p><p>
</p><p></script>
</p><p><style type="text/css">
</p><p>* {
</p><p>	margin: 0;
</p><p>	padding: 0;
</p><p>	font-size: 12px;
</p><p>	line-height: 25px;
</p><p>}
</p><p>
</p><p>#loginBox {
</p><p>	width: 300px;
</p><p>	border: 1px solid #ccc;
</p><p>	background: #FFF;
</p><p>}
</p><p>
</p><p>h1 {
</p><p>	height: 35px;
</p><p>	line-height: 35px;
</p><p>	background: #e8e8e8;
</p><p>	font-size: 14px;
</p><p>	border-bottom: 1px solid #ccc;
</p><p>	text-indent: 5px;
</p><p>}
</p><p>
</p><p>input.name,input.code {
</p><p>	width: 150px;
</p><p>	height: 25px;
</p><p>	border: 1px solid #ccc;
</p><p>	margin: 0 0 0 0px;
</p><p>	padding: 0 0 0 20px;
</p><p>}
</p><p>
</p><p>input.verifyCode {
</p><p>	height: 25px;
</p><p>	width: 75px;
</p><p>	border: 1px solid #ccc;
</p><p>}
</p><p>
</p><p>input.name {
</p><p>	background: url("../../../images/login-username.gif") no-repeat left
</p><p>		center;
</p><p>}
</p><p>
</p><p>input.code {
</p><p>	background: url("../../../images/login-password.gif") no-repeat left
</p><p>		center;
</p><p>}
</p><p>
</p><p>input.loginBtn,input.registerBtn {
</p><p>	width: 54px;
</p><p>	height: 21px;
</p><p>	border: none;
</p><p>	margin: 5px;
</p><p>}
</p><p>
</p><p>input.loginBtn {
</p><p>	background: url("../../../images/login-btn.gif") no-repeat;
</p><p>}
</p><p>
</p><p>html,body {
</p><p>	/*background: url("../images/background-top.png") no-repeat scroll 0 0 #318DAC;*/
</p><p>	border: 0px solid #333333;
</p><p>	color: #333333;
</p><p>	font: 12px/150% Arial, Helvetica, sans-serif, '宋体';
</p><p>	margin: 0;
</p><p>	padding: 0;
</p><p>	font-family: Arial, Tahoma, Verdana, sans-serif;
</p><p>	font-size: 12px;
</p><p>}
</p><p>
</p><p>.logo {
</p><p>	background: url("../../../images/logo.png") no-repeat scroll left top
</p><p>		transparent;
</p><p>	height: 70px;
</p><p>	left: 10px;
</p><p>	position: absolute;
</p><p>	top: 10px;
</p><p>	width: 170px;
</p><p>}
</p><p>
</p><p>.header {
</p><p>	height: 88px;
</p><p>	margin-top: auto;
</p><p>	padding: 0 10px;
</p><p>	position: relative;
</p><p>	background: url("../../../images/background-top.png") no-repeat 0 0
</p><p>		#318DAC;
</p><p>}
</p><p></style>
</p><p></head>
</p><p><body onload="document.getElementById('pw').focus();">
</p><p>
</p><p>	<div class="header">
</p><p>		<!-- 	
</p><p>	<div class="logo" title="China Fullfill"></div>
</p><p>-->
</p><p>	</div>
</p><p>
</p><p>	<div style="margin-top: 100px; text-align: center">
</p><p>		<center>
</p><p>			<form name="login" id="loginForm" method="post" action="">
</p><p>				<div id="loginBox" style="text-align: left">
</p><p>					<h1>Action导入</h1>
</p><p>					<div
</p><p>						style="margin-top: 5px; margin-left: 5px; font-size: 13px; color: red; text-align: center;"
</p><p>						id="msg">
</p><p>						<span><?php echo $msg?></span>
</p><p>					</div>
</p><p>					<div style="margin-top: 5px; margin-left: 5px; font-size: 13px;">
</p><p>						请输入密码： <input type="text" class="name" name="pw" id="pw"
</p><p>							tabindex="1" />
</p><p>					</div>
</p><p>
</p><p>					<p align="center">
</p><p>						<input type="submit" value="" class="loginBtn" />
</p><p>					</p>
</p><p>				</div>
</p><p>			</form>
</p><p>		</center>
</p><p>	</div>
</p><p></body>
</p><p></html>
</p><p><?php }?>
</p><p>
</p><p></pre></p>			<div class="fixed"></div>
		</div>
		<div class="under">
			<span class="categories">分类: </span><span><a
				href="http://www.logo-printer.cn/blog/cat/jishu"
				title="查看 技术其他 中的全部文章" rel="category tag">技术其他</a></span> <span
				class="tags">标签: </span><span></span>
		</div>
	</div>
		<div class="pagination" id="pagenavi"><a href="/ptblog/public/front/index/index/page/1" class="first">1 ...</a><a href="/ptblog/public/front/index/index/page/12" class="prev">&lsaquo;&lsaquo;</a><a href="/ptblog/public/front/index/index/page/11">11</a><a href="/ptblog/public/front/index/index/page/12">12</a><span class="current">13</span><a href="/ptblog/public/front/index/index/page/14">14</a><a href="/ptblog/public/front/index/index/page/15">15</a><a href="/ptblog/public/front/index/index/page/14" class="next">&rsaquo;&rsaquo;</a><label style="margin-left: 5px;">Total<span style="font-weight: bold;">298</span></label></div>	

</div>
<!-- main END -->


<!-- sidebar START -->
<div id="sidebar">

	<!-- sidebar north START -->
	<div id="northsidebar" class="sidebar">
		<!-- feeds -->
		<!-- showcase -->

		<div id="text-3" class="widget widget_text">
			<div class="textwidget">
				这是一个个人技术博客！
				
			</div>
		</div>
	</div>
	<!-- sidebar north END -->

	<div id="centersidebar">

		<!-- sidebar east START -->
		<div id="eastsidebar" class="sidebar">
			<div id="meta-3" class="widget widget_meta">
				<h3>功能</h3>
				<ul>
					<li><a href="http://www.logo-printer.cn/blog/wp-login.php">登录</a></li>
					<li><a href="http://www.logo-printer.cn/blog/feed"
						title="使用 RSS 2.0 订阅本站点内容">文章 <abbr
							title="Really Simple Syndication">RSS</abbr></a></li>
					<li><a href="http://www.logo-printer.cn/blog/comments/feed"
						title="使用 RSS 订阅本站点的所有文章的近期评论">评论 <abbr
							title="Really Simple Syndication">RSS</abbr></a></li>
					<li><a href="http://wordpress.org/"
						title="基于 WordPress，一个优美、先进的个人信息发布平台。">WordPress.org</a></li>
				</ul>
			</div>
		</div>
		<!-- sidebar east END -->

		<!-- sidebar west START -->
		<div id="westsidebar" class="sidebar">
			<div id="categories-3" class="widget widget_categories">
				<h3>分类目录</h3>
				<ul>
					<li class="cat-item cat-item-4"><a
						href="http://www.logo-printer.cn/blog/cat/linux"
						title="查看 linux收集 下的所有文章">linux收集</a></li>
					<li class="cat-item cat-item-3"><a
						href="http://www.logo-printer.cn/blog/cat/php"
						title="查看 php整理 下的所有文章">php整理</a></li>
					<li class="cat-item cat-item-1"><a
						href="http://www.logo-printer.cn/blog/cat/jishu"
						title="查看 技术其他 下的所有文章">技术其他</a></li>
					<li class="cat-item cat-item-9"><a
						href="http://www.logo-printer.cn/blog/cat/all-else" title="杂七杂八">杂七杂八</a></li>
					<li class="cat-item cat-item-8"><a
						href="http://www.logo-printer.cn/blog/cat/life"
						title="查看 生活情感 下的所有文章">生活情感</a></li>
				</ul>
			</div>
		</div>
		<!-- sidebar west END -->
		<div class="fixed"></div>
	</div>

	<!-- sidebar south START -->
	<div id="southsidebar" class="sidebar">
		<div id="recent-posts-3" class="widget widget_recent_entries">
			<h3>近期文章</h3>
			<ul>
				<li><a href="http://www.logo-printer.cn/blog/jishu/1812"
					title="windows 获取当前位置相关信息">windows 获取当前位置相关信息</a></li>
				<li><a href="http://www.logo-printer.cn/blog/jishu/1810"
					title="FileZilla文件格式关联">FileZilla文件格式关联</a></li>
				<li><a href="http://www.logo-printer.cn/blog/jishu/1808"
					title="zend framerowk layout">zend framerowk layout</a></li>
				<li><a href="http://www.logo-printer.cn/blog/linux/1806"
					title="P999最新2.3.3/V21E的CRT电视机效果,无BUG！">P999最新2.3.3/V21E的CRT电视机效果,无BUG！</a></li>
				<li><a href="http://www.logo-printer.cn/blog/jishu/1804"
					title="LG 基于港行systemUI重新编译分别修改了通知栏5键和6键快捷开关">LG
						基于港行systemUI重新编译分别修改了通知栏5键和6键快捷开关</a></li>
			</ul>
		</div>
	</div>
	<!-- sidebar south END -->

</div>
<!-- sidebar END -->
<div class="fixed"></div>


   
		</div>
		<!-- content END -->

		<!-- footer START -->
		<div id="footer">
			<a id="gotop" href="#" onclick="MGJS.goTop();return false;">回到顶部</a>
			<a id="powered" href="http://wordpress.org/">WordPress</a>
			<div id="copyright">版权所有 &copy; 2011-2012 思瑞品牌设计</div>
			<div id="themeinfo">
				主题由 <a href="http://www.neoease.com/">NeoEase</a> 提供, 通过 <a
					href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> 和 <a
					href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS
					3</a> 验证.
			</div>
		</div>
		<!-- footer END -->

	</div>
	<!-- container END -->
</div>
<!-- wrap END -->

</body>
</html>